/* ============================================================
   DIGITAL BUSINESS NUGGETS — Design Tokens
   "Desert Editorial" Design System
   ============================================================ */

@layer tokens {

  :root {
    /* === Color System === */
    color-scheme: light dark;

    /* --- Brand --- */
    --gold-50:  #FDF8E8;
    --gold-100: #FAF0C8;
    --gold-200: #F5E08E;
    --gold-300: #EDCC5A;
    --gold-400: #D4A846;
    --gold-500: #B8913A;
    --gold-600: #96742F;
    --gold-700: #735824;
    --gold-800: #503D19;
    --gold-900: #2D220E;

    /* --- Navy --- */
    --navy-50:  #E8E8ED;
    --navy-100: #C5C5D1;
    --navy-200: #9494A8;
    --navy-300: #64647F;
    --navy-400: #3D3D5C;
    --navy-500: #1A1A2E;
    --navy-600: #151527;
    --navy-700: #101020;
    --navy-800: #0B0B18;
    --navy-900: #060610;

    /* --- Blue (links/actions) --- */
    --blue-50:  #EFF6FF;
    --blue-100: #DBEAFE;
    --blue-200: #BFDBFE;
    --blue-300: #93C5FD;
    --blue-400: #60A5FA;
    --blue-500: #2563EB;
    --blue-600: #1D4ED8;
    --blue-700: #1E40AF;
    --blue-800: #1E3A8A;
    --blue-900: #172554;

    /* --- Warm Neutrals --- */
    --sand-50:  #FAFAF8;
    --sand-100: #F5F4F0;
    --sand-200: #ECEAE4;
    --sand-300: #DDD9D0;
    --sand-400: #C4BFB3;
    --sand-500: #A19B8E;
    --sand-600: #7D786D;
    --sand-700: #5A564E;
    --sand-800: #3A3733;
    --sand-900: #1D1C1A;

    /* --- Semantic (Light Mode defaults) --- */
    --color-bg:              var(--sand-50);
    --color-bg-elevated:     #FFFFFF;
    --color-bg-recessed:     var(--sand-100);
    --color-bg-overlay:      rgba(26, 26, 46, 0.6);
    --color-surface:         #FFFFFF;
    --color-surface-hover:   var(--sand-100);
    --color-text:            var(--navy-500);
    --color-text-secondary:  var(--sand-600);
    --color-text-tertiary:   var(--sand-500);
    --color-text-inverse:    #FFFFFF;
    --color-heading:         var(--navy-500);
    --color-link:            var(--blue-500);
    --color-link-hover:      var(--blue-700);
    --color-link-visited:    var(--blue-600);
    --color-accent:          var(--gold-400);
    --color-accent-soft:     var(--gold-50);
    --color-accent-text:     var(--gold-700);
    --color-border:          var(--sand-200);
    --color-border-strong:   var(--sand-300);
    --color-success:         #059669;
    --color-error:           #DC2626;
    --color-code-bg:         var(--sand-100);
    --color-code-text:       var(--navy-600);
    --color-selection-bg:    var(--gold-100);
    --color-selection-text:  var(--navy-500);
    --color-scrollbar:       var(--sand-300);
    --color-scrollbar-hover: var(--sand-400);

    /* --- Gradient accents --- */
    --gradient-gold:     linear-gradient(135deg, var(--gold-300), var(--gold-500));
    --gradient-hero:     linear-gradient(180deg, var(--sand-50) 0%, var(--gold-50) 100%);
    --gradient-card:     linear-gradient(180deg, transparent 60%, var(--gold-50) 100%);
    --gradient-fade-out: linear-gradient(180deg, transparent 0%, var(--color-bg) 100%);

    /* === Typography === */

    /* --- Font Families --- */
    --font-body:     'Freight Text Pro', Charter, 'Bitstream Charter', 'Sitka Text', Cambria, Georgia, serif;
    --font-heading:  'Playfair Display', 'DM Serif Display', Georgia, 'Times New Roman', serif;
    --font-ui:       'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono:     'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;

    /* --- Font Sizes (fluid with clamp) --- */
    --text-xs:   clamp(0.7rem,   0.65rem + 0.25vw, 0.8rem);
    --text-sm:   clamp(0.8rem,   0.75rem + 0.3vw,  0.9rem);
    --text-base: clamp(1.05rem,  1rem + 0.25vw,     1.2rem);
    --text-lg:   clamp(1.15rem,  1.05rem + 0.5vw,   1.35rem);
    --text-xl:   clamp(1.3rem,   1.15rem + 0.75vw,  1.65rem);
    --text-2xl:  clamp(1.6rem,   1.35rem + 1.25vw,  2.2rem);
    --text-3xl:  clamp(2rem,     1.6rem + 2vw,      3rem);
    --text-4xl:  clamp(2.4rem,   1.8rem + 3vw,      4rem);
    --text-5xl:  clamp(3rem,     2rem + 4vw,        5.5rem);

    /* --- Font Weights --- */
    --weight-normal:    400;
    --weight-medium:    500;
    --weight-semibold:  600;
    --weight-bold:      700;
    --weight-extrabold: 800;

    /* --- Line Heights --- */
    --leading-tight:    1.2;
    --leading-snug:     1.35;
    --leading-normal:   1.6;
    --leading-relaxed:  1.75;

    /* --- Letter Spacing --- */
    --tracking-tight:    -0.02em;
    --tracking-normal:    0em;
    --tracking-wide:      0.025em;
    --tracking-wider:     0.05em;
    --tracking-widest:    0.1em;

    /* === Spacing Scale (4px base) === */
    --space-1:   0.25rem;   /* 4px */
    --space-2:   0.5rem;    /* 8px */
    --space-3:   0.75rem;   /* 12px */
    --space-4:   1rem;      /* 16px */
    --space-5:   1.25rem;   /* 20px */
    --space-6:   1.5rem;    /* 24px */
    --space-8:   2rem;      /* 32px */
    --space-10:  2.5rem;    /* 40px */
    --space-12:  3rem;      /* 48px */
    --space-16:  4rem;      /* 64px */
    --space-20:  5rem;      /* 80px */
    --space-24:  6rem;      /* 96px */
    --space-32:  8rem;      /* 128px */

    /* === Layout === */
    --measure:        65ch;
    --content-width:  48rem;       /* ~768px */
    --wide-width:     72rem;       /* ~1152px */
    --max-width:      80rem;       /* ~1280px */
    --gutter:         clamp(1rem, 3vw, 2rem);
    --nav-height:     4rem;

    /* === Borders === */
    --radius-sm:   0.25rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.75rem;
    --radius-xl:   1rem;
    --radius-2xl:  1.5rem;
    --radius-full: 50%;

    /* === Shadows === */
    --shadow-xs:     0 1px 2px rgba(26, 26, 46, 0.04);
    --shadow-sm:     0 1px 3px rgba(26, 26, 46, 0.06), 0 1px 2px rgba(26, 26, 46, 0.04);
    --shadow-md:     0 4px 6px rgba(26, 26, 46, 0.05), 0 2px 4px rgba(26, 26, 46, 0.04);
    --shadow-lg:     0 10px 15px rgba(26, 26, 46, 0.06), 0 4px 6px rgba(26, 26, 46, 0.04);
    --shadow-xl:     0 20px 25px rgba(26, 26, 46, 0.08), 0 8px 10px rgba(26, 26, 46, 0.04);
    --shadow-gold:   0 4px 14px rgba(212, 168, 70, 0.2);
    --shadow-inset:  inset 0 2px 4px rgba(26, 26, 46, 0.04);

    /* === Transitions === */
    --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in:       cubic-bezier(0.4, 0, 1, 1);
    --ease-out:      cubic-bezier(0, 0, 0.2, 1);
    --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast:    120ms;
    --duration-normal:  200ms;
    --duration-slow:    350ms;
    --duration-slower:  500ms;

    /* === Z-Index Scale === */
    --z-below:    -1;
    --z-base:      0;
    --z-raised:    1;
    --z-dropdown:  10;
    --z-sticky:    20;
    --z-overlay:   30;
    --z-modal:     40;
    --z-toast:     50;
  }

  /* === Dark Mode (System Preference) === */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --color-bg:              #111113;
      --color-bg-elevated:     #1A1A1E;
      --color-bg-recessed:     #0D0D0F;
      --color-bg-overlay:      rgba(0, 0, 0, 0.7);
      --color-surface:         #1E1E22;
      --color-surface-hover:   #28282E;
      --color-text:            #E4E4E7;
      --color-text-secondary:  #9C9CA5;
      --color-text-tertiary:   #6B6B75;
      --color-text-inverse:    var(--navy-500);
      --color-heading:         #F0F0F2;
      --color-link:            var(--blue-400);
      --color-link-hover:      var(--blue-300);
      --color-link-visited:    var(--blue-400);
      --color-accent:          var(--gold-400);
      --color-accent-soft:     rgba(212, 168, 70, 0.1);
      --color-accent-text:     var(--gold-300);
      --color-border:          #2A2A30;
      --color-border-strong:   #3A3A42;
      --color-code-bg:         #1A1A1E;
      --color-code-text:       var(--gold-300);
      --color-selection-bg:    rgba(212, 168, 70, 0.25);
      --color-selection-text:  #FFFFFF;
      --color-scrollbar:       #3A3A42;
      --color-scrollbar-hover: #4A4A52;

      --gradient-gold:     linear-gradient(135deg, var(--gold-500), var(--gold-700));
      --gradient-hero:     linear-gradient(180deg, #111113 0%, rgba(212, 168, 70, 0.05) 100%);
      --gradient-card:     linear-gradient(180deg, transparent 60%, rgba(212, 168, 70, 0.05) 100%);
      --gradient-fade-out: linear-gradient(180deg, transparent 0%, #111113 100%);

      --shadow-xs:     0 1px 2px rgba(0, 0, 0, 0.2);
      --shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
      --shadow-md:     0 4px 6px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.2);
      --shadow-lg:     0 10px 15px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.2);
      --shadow-xl:     0 20px 25px rgba(0, 0, 0, 0.35), 0 8px 10px rgba(0, 0, 0, 0.2);
      --shadow-gold:   0 4px 14px rgba(212, 168, 70, 0.15);
    }
  }

  /* === Dark Mode (User Toggle) === */
  [data-theme="dark"] {
    --color-bg:              #111113;
    --color-bg-elevated:     #1A1A1E;
    --color-bg-recessed:     #0D0D0F;
    --color-bg-overlay:      rgba(0, 0, 0, 0.7);
    --color-surface:         #1E1E22;
    --color-surface-hover:   #28282E;
    --color-text:            #E4E4E7;
    --color-text-secondary:  #9C9CA5;
    --color-text-tertiary:   #6B6B75;
    --color-text-inverse:    var(--navy-500);
    --color-heading:         #F0F0F2;
    --color-link:            var(--blue-400);
    --color-link-hover:      var(--blue-300);
    --color-link-visited:    var(--blue-400);
    --color-accent:          var(--gold-400);
    --color-accent-soft:     rgba(212, 168, 70, 0.1);
    --color-accent-text:     var(--gold-300);
    --color-border:          #2A2A30;
    --color-border-strong:   #3A3A42;
    --color-code-bg:         #1A1A1E;
    --color-code-text:       var(--gold-300);
    --color-selection-bg:    rgba(212, 168, 70, 0.25);
    --color-selection-text:  #FFFFFF;
    --color-scrollbar:       #3A3A42;
    --color-scrollbar-hover: #4A4A52;

    --gradient-gold:     linear-gradient(135deg, var(--gold-500), var(--gold-700));
    --gradient-hero:     linear-gradient(180deg, #111113 0%, rgba(212, 168, 70, 0.05) 100%);
    --gradient-card:     linear-gradient(180deg, transparent 60%, rgba(212, 168, 70, 0.05) 100%);
    --gradient-fade-out: linear-gradient(180deg, transparent 0%, #111113 100%);

    --shadow-xs:     0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md:     0 4px 6px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-lg:     0 10px 15px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.2);
    --shadow-xl:     0 20px 25px rgba(0, 0, 0, 0.35), 0 8px 10px rgba(0, 0, 0, 0.2);
    --shadow-gold:   0 4px 14px rgba(212, 168, 70, 0.15);
  }
}