/* ============================================================================
   Plain Talk Developers — tokens.css
   Mirrors tokens.json. Light theme on :root, dark theme overrides under
   [data-theme="dark"]. Component CSS reads ONLY from these variables.
   ============================================================================ */

/* ---- Web fonts (self-hostable; loaded from Google Fonts here for portability) */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Palette: navy (ink) -------------------------------------------------- */
  --color-navy-50:  #EEF2F7;
  --color-navy-100: #DCE4ED;
  --color-navy-200: #B8C7D9;
  --color-navy-300: #8FA4BC;
  --color-navy-400: #5C7592;
  --color-navy-500: #3D5773;
  --color-navy-600: #2A3F58;
  --color-navy-700: #1F2F44;
  --color-navy-800: #142235;
  --color-navy-900: #0E1A2A;
  --color-navy-950: #08111E;

  /* ---- Palette: orange (flare) --------------------------------------------- */
  --color-orange-50:  #FFF1EA;
  --color-orange-100: #FFE0D2;
  --color-orange-200: #FFC1A5;
  --color-orange-300: #FF9C73;
  --color-orange-400: #FF7846;
  --color-orange-500: #F55A24;
  --color-orange-600: #DC4711;
  --color-orange-700: #B5380E;
  --color-orange-800: #872A0B;
  --color-orange-900: #5D1D07;

  /* ---- Palette: neutral (warm paper) --------------------------------------- */
  --color-neutral-50:  #FAFAF7;
  --color-neutral-100: #F2F1EC;
  --color-neutral-200: #E5E3DA;
  --color-neutral-300: #CFCCBE;
  --color-neutral-400: #9F9C8C;
  --color-neutral-500: #6F6C5E;
  --color-neutral-600: #4E4B40;
  --color-neutral-700: #36342C;
  --color-neutral-800: #1F1E19;
  --color-neutral-900: #100F0C;

  /* ---- Palette: semantic ramps --------------------------------------------- */
  --color-green-100: #DCF2E7; --color-green-400: #4DC68B; --color-green-500: #2E9A6B; --color-green-700: #1F6B49; --color-green-900: #0E3122;
  --color-amber-100: #F8E9C9; --color-amber-400: #E8B040; --color-amber-500: #B0791A; --color-amber-700: #7A5310; --color-amber-900: #3A2706;
  --color-red-100:   #F8DAD3; --color-red-400:   #E45A45; --color-red-500:   #C7311D; --color-red-700:   #8A2110; --color-red-900:   #3F0E07;
  --color-blue-100:  #D9E6F5; --color-blue-400:  #5694D9; --color-blue-500:  #2E6FB8; --color-blue-700:  #1F4D80; --color-blue-900:  #0E2238;

  /* ============================================================================
     Semantic aliases — light theme (default)
     Components MUST consume these, not raw palette values.
     ============================================================================ */
  --color-bg-canvas:   var(--color-neutral-50);
  --color-bg-surface:  #FFFFFF;
  --color-bg-muted:    var(--color-neutral-100);
  --color-bg-sunken:   var(--color-neutral-200);
  --color-bg-inverse:  var(--color-navy-900);

  --color-text-primary:   var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-700);
  --color-text-muted:     var(--color-neutral-500);
  --color-text-disabled:  var(--color-neutral-400);
  --color-text-inverse:   var(--color-neutral-50);
  --color-text-accent:    var(--color-orange-600);
  --color-text-on-accent: #FFFFFF;

  --color-border-default: var(--color-neutral-200);
  --color-border-strong:  var(--color-neutral-300);
  --color-border-muted:   var(--color-neutral-100);
  --color-border-accent:  var(--color-orange-500);
  --color-border-inverse: var(--color-navy-700);

  --color-accent-bg:        var(--color-orange-500);
  --color-accent-bg-hover:  var(--color-orange-600);
  --color-accent-bg-active: var(--color-orange-700);
  --color-accent-bg-muted:  var(--color-orange-100);
  --color-accent-fg:        #FFFFFF;
  --color-accent-fg-muted:  var(--color-orange-700);

  --color-feedback-success-strong:    var(--color-green-700);
  --color-feedback-success-fg:        var(--color-green-500);
  --color-feedback-success-bg:        var(--color-green-100);
  --color-feedback-success-on-strong: #FFFFFF;
  --color-feedback-warning-strong:    var(--color-amber-700);
  --color-feedback-warning-fg:        var(--color-amber-500);
  --color-feedback-warning-bg:        var(--color-amber-100);
  --color-feedback-warning-on-strong: #FFFFFF;
  --color-feedback-error-strong:      var(--color-red-700);
  --color-feedback-error-fg:          var(--color-red-500);
  --color-feedback-error-bg:          var(--color-red-100);
  --color-feedback-error-on-strong:   #FFFFFF;
  --color-feedback-info-strong:       var(--color-blue-700);
  --color-feedback-info-fg:           var(--color-blue-500);
  --color-feedback-info-bg:           var(--color-blue-100);
  --color-feedback-info-on-strong:    #FFFFFF;

  --color-focus-ring: var(--color-orange-500);

  /* ---- Typography ---------------------------------------------------------- */
  --font-family-display: 'Newsreader', ui-serif, Georgia, Cambria, 'Times New Roman', serif;
  --font-family-sans:    'Geist', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-family-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --font-size-xs:   0.75rem;   /* 12 */
  --font-size-sm:   0.875rem;  /* 14 */
  --font-size-base: 1rem;      /* 16 */
  --font-size-md:   1.125rem;  /* 18 */
  --font-size-lg:   1.25rem;   /* 20 */
  --font-size-xl:   1.5rem;    /* 24 */
  --font-size-2xl:  1.875rem;  /* 30 */
  --font-size-3xl:  2.25rem;   /* 36 */
  --font-size-4xl:  3rem;      /* 48 */
  --font-size-5xl:  3.75rem;   /* 60 */
  --font-size-6xl:  4.5rem;    /* 72 */
  --font-size-7xl:  6rem;      /* 96 */

  --line-height-tight:   1.1;
  --line-height-snug:    1.25;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.65;
  --line-height-loose:   1.8;

  --letter-spacing-tighter: -0.03em;
  --letter-spacing-tight:   -0.015em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.04em;
  --letter-spacing-wider:   0.08em;
  --letter-spacing-widest:  0.14em;

  /* ---- Spacing (4px base) -------------------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-14: 3.5rem;   /* 56 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */
  --space-40: 10rem;    /* 160 */
  --space-48: 12rem;    /* 192 */
  --space-56: 14rem;    /* 224 */
  --space-64: 16rem;    /* 256 */
  --space-80: 20rem;    /* 320 */
  --space-96: 24rem;    /* 384 */

  /* ---- Radii --------------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-pill: 9999px;

  /* ---- Shadows ------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(14, 26, 42, 0.06);
  --shadow-sm: 0 2px 4px rgba(14, 26, 42, 0.06), 0 1px 2px rgba(14, 26, 42, 0.04);
  --shadow-md: 0 8px 16px -4px rgba(14, 26, 42, 0.10), 0 2px 6px -2px rgba(14, 26, 42, 0.06);
  --shadow-lg: 0 16px 32px -8px rgba(14, 26, 42, 0.14), 0 4px 10px -4px rgba(14, 26, 42, 0.08);
  --shadow-xl: 0 28px 56px -12px rgba(14, 26, 42, 0.20), 0 8px 16px -8px rgba(14, 26, 42, 0.10);
  --shadow-ring:       0 0 0 3px rgba(245, 90, 36, 0.40);
  --shadow-ring-error: 0 0 0 3px rgba(199, 49, 29, 0.35);

  /* ---- Motion -------------------------------------------------------------- */
  --duration-instant: 0ms;
  --duration-fast:    120ms;
  --duration-base:    200ms;
  --duration-slow:    320ms;
  --duration-slower:  480ms;

  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-enter:    cubic-bezier(0, 0, 0, 1);
  --easing-exit:     cubic-bezier(0.4, 0, 1, 1);
  --easing-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Z-index ------------------------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-drawer: 1200;
  --z-modal: 1300;
  --z-popover: 1400;
  --z-toast: 1500;
  --z-max: 9999;

  /* ---- Breakpoints (consumed by media queries; not direct vars) ------------ */
  --bp-xs: 480px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  /* ---- Layout containers --------------------------------------------------- */
  --container-max:    1200px;
  --container-narrow: 720px;
  --container-wide:   1440px;
}

/* ============================================================================
   Dark theme — same semantic surface names remapped onto the navy palette.
   Apply via <html data-theme="dark"> or <body data-theme="dark">.
   ============================================================================ */
[data-theme="dark"] {
  --color-bg-canvas:   var(--color-navy-950);
  --color-bg-surface:  var(--color-navy-900);
  --color-bg-muted:    var(--color-navy-800);
  --color-bg-sunken:   var(--color-navy-950);
  --color-bg-inverse:  var(--color-neutral-50);

  --color-text-primary:   var(--color-neutral-50);
  --color-text-secondary: var(--color-navy-100);
  --color-text-muted:     var(--color-navy-300);
  --color-text-disabled:  var(--color-navy-500);
  --color-text-inverse:   var(--color-navy-900);
  --color-text-accent:    var(--color-orange-400);
  --color-text-on-accent: var(--color-navy-950);

  --color-border-default: var(--color-navy-700);
  --color-border-strong:  var(--color-navy-600);
  --color-border-muted:   var(--color-navy-800);
  --color-border-accent:  var(--color-orange-500);
  --color-border-inverse: var(--color-neutral-200);

  --color-accent-bg:        var(--color-orange-500);
  --color-accent-bg-hover:  var(--color-orange-400);
  --color-accent-bg-active: var(--color-orange-300);
  --color-accent-bg-muted:  var(--color-navy-800);
  --color-accent-fg:        var(--color-navy-950);
  --color-accent-fg-muted:  var(--color-orange-300);

  --color-feedback-success-strong:    var(--color-green-400);
  --color-feedback-success-fg:        var(--color-green-400);
  --color-feedback-success-bg:        var(--color-green-900);
  --color-feedback-success-on-strong: var(--color-navy-950);
  --color-feedback-warning-strong:    var(--color-amber-400);
  --color-feedback-warning-fg:        var(--color-amber-400);
  --color-feedback-warning-bg:        var(--color-amber-900);
  --color-feedback-warning-on-strong: var(--color-navy-950);
  --color-feedback-error-strong:      var(--color-red-400);
  --color-feedback-error-fg:          var(--color-red-400);
  --color-feedback-error-bg:          var(--color-red-900);
  --color-feedback-error-on-strong:   var(--color-navy-950);
  --color-feedback-info-strong:       var(--color-blue-400);
  --color-feedback-info-fg:           var(--color-blue-400);
  --color-feedback-info-bg:           var(--color-blue-900);
  --color-feedback-info-on-strong:    var(--color-navy-950);

  --color-focus-ring: var(--color-orange-400);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 8px 16px -4px rgba(0, 0, 0, 0.50), 0 2px 6px -2px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.60), 0 4px 10px -4px rgba(0, 0, 0, 0.40);
  --shadow-xl: 0 28px 56px -12px rgba(0, 0, 0, 0.70), 0 8px 16px -8px rgba(0, 0, 0, 0.50);
  --shadow-ring:       0 0 0 3px rgba(255, 120, 70, 0.50);
  --shadow-ring-error: 0 0 0 3px rgba(228, 90, 69, 0.45);
}

/* ============================================================================
   Base resets + page defaults using tokens. Optional — components don't
   require these to function — but recommended for any page consuming the system.
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--color-orange-200); color: var(--color-navy-900); }
[data-theme="dark"] ::selection { background: var(--color-orange-500); color: var(--color-navy-950); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}