/*
 * NDG Design System — CSS Custom Properties
 * Owned by this project. Inter and JetBrains Mono self-hosted via brands.css.
 */


/* ===========================================================================
   :root — foundation tokens
   =========================================================================== */
:root {

  /* --- Neutral scale (cool-tinted) -------------------------------------- */
  --slate-50:  #F7F9FC;
  --slate-100: #EEF2F8;
  --slate-200: #E4E8EF;
  --slate-300: #CDD4DF;
  --slate-400: #9AA5B6;
  --slate-500: #6B7689;
  --slate-600: #4A5468;
  --slate-700: #313A4D;
  --slate-800: #1F2632;
  --slate-900: #1A2332;
  --slate-950: #0E1521;


  /* --- Brand palette ---------------------------------------------------- */
  /* Alternate cyan accent family (possible future switch):
     accent/ink #0E7490, hover #155E75, shimmer #67E8F9, glow #22D3EE,
     soft #CFFAFE, tint #ECFEFF. Mirror accent/hover/shimmer in input.css. */
  --color-brand-primary:       #1A2332;
  --color-brand-primary-dark:  #0E1521;
  --color-brand-accent:        #005B99;
  --color-brand-accent-hover:  #00497A;
  --color-brand-shimmer:       #6FB6E6;
  --color-brand-ink:           #005B99;
  --color-brand-glow:          #4DA8E6;
  --color-brand-border:        #E4E8EF;

  /* Pale tints — soft callout rows, recommended pricing column, step rows */
  --accent-soft:               #DCECF7;
  --accent-tint:               #EEF6FC;


  /* --- Status colors ---------------------------------------------------- */
  --status-success: #2C8A5F;
  --status-warning: #C77A1F;
  --status-error:   #D14B3A;


  /* --- Semantic foreground / surface ------------------------------------ */
  --fg-1: var(--slate-900);
  --fg-2: var(--slate-700);
  --fg-3: var(--slate-600);
  --fg-4: #636E80;  /* darkened from slate-500 #6B7689 for AA contrast (~5.2:1 on white) */
  --fg-inv: #FFFFFF;
  --fg-inv-muted: rgba(255, 255, 255, 0.78);

  --bg-0: #FFFFFF;
  --bg-1: var(--slate-50);
  --bg-2: var(--slate-100);
  --bg-dark: var(--slate-900);


  /* --- Code-block surfaces ---------------------------------------------- */
  --bg-code:        var(--slate-50);
  --bg-code-header: var(--slate-100);
  --border-code:    var(--slate-200);
  --fg-code:        var(--slate-800);


  /* --- Typography ------------------------------------------------------- */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  1.875rem;
  --fs-4xl:  2.5rem;
  --fs-5xl:  3.25rem;
  --fs-6xl:  4rem;
  --fs-7xl:  5rem;
  --fs-8xl:  6.5rem;

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --lh-tight:   1.08;
  --lh-snug:    1.2;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  --tracking-tightest: -0.03em;
  --tracking-tight:    -0.022em;
  --tracking-snug:     -0.012em;
  --tracking-normal:   0;
  --tracking-wide:     0.025em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.14em;


  /* --- Layout widths ---------------------------------------------------- */
  --max-w-3xl: 48rem;
  --max-w-5xl: 64rem;
  --max-w-6xl: 72rem;
  --max-w-7xl: 80rem;


  /* --- Spacing ---------------------------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4.5rem;
  --space-20: 6rem;
  --space-24: 7rem;
  --space-32: 9rem;


  /* --- Radii — soft 8px corners ---------------------------------------- */
  --radius-none:  0;
  --radius-sharp: 8px;
  --radius-full:  9999px;


  /* --- Shadows — minimal, soft cool-tinted ------------------------------ */
  --shadow-xs:  0 1px 2px 0 rgba(26, 35, 50, 0.04);
  --shadow-sm:  0 1px 3px 0 rgba(26, 35, 50, 0.06);
  --shadow-md:  0 2px 8px -1px rgba(26, 35, 50, 0.06);
  --shadow-lg:  0 4px 16px -2px rgba(26, 35, 50, 0.08);
  --shadow-xl:  0 8px 24px -4px rgba(26, 35, 50, 0.10);
  --shadow-2xl: 0 16px 48px -8px rgba(26, 35, 50, 0.15);


  /* --- Motion ----------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-std:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);

  --dur-fast:   120ms;
  --dur-normal: 200ms;
  --dur-slow:   320ms;
  --dur-reveal: 700ms;


  /* --- Card --------------------------------------------------------------- */
  --card-bg:           #FFFFFF;
  --card-bg-hover:     var(--slate-50);
  --card-border:       var(--slate-200);
  --card-border-hover: var(--color-brand-accent);


  /* --- Focus indicator (WCAG 2.4.7 Focus Visible) ---------------------- */
  --shadow-focus: 0 0 0 2px var(--surface-page),
                  0 0 0 4px var(--color-brand-accent);
}


/* ===========================================================================
   Semantic alias layer
   =========================================================================== */
:root {

  /* --- Surfaces --------------------------------------------------------- */
  --surface-page:     var(--bg-0);
  --surface-raised:   var(--bg-1);
  --surface-sunken:   var(--bg-2);
  --surface-inverse:  var(--bg-dark);
  --surface-callout:  var(--accent-soft);
  --surface-tint:     var(--accent-tint);

  /* --- Text ------------------------------------------------------------- */
  --text-primary:     var(--fg-1);
  --text-secondary:   var(--fg-2);
  --text-muted:       var(--fg-3);
  --text-subtle:      var(--fg-4);
  --text-on-inverse:  var(--fg-inv);
  --text-on-inverse-muted: var(--fg-inv-muted);
  --text-link-on-light: var(--color-brand-ink);
  --text-link-on-dark:  var(--color-brand-glow);

  /* --- Borders ---------------------------------------------------------- */
  --border-default:   var(--color-brand-border);
  --border-strong:    var(--slate-300);
  --border-subtle:    var(--slate-100);
  --border-focus:     var(--color-brand-accent);

  /* --- Actions ---------------------------------------------------------- */
  --action-primary:           var(--color-brand-accent);
  --action-primary-hover:     var(--color-brand-accent-hover);
  --action-primary-text:      #FFFFFF;
  --action-secondary-text:    var(--color-brand-primary);
  --action-destructive:       var(--status-error);
  --action-destructive-hover: #B23425;

  /* --- Status ----------------------------------------------------------- */
  --status-success-fg:     var(--status-success);
  --status-warning-fg:     var(--status-warning);
  --status-error-fg:       var(--status-error);

  --status-success-bg:     #E0F4EB;
  --status-success-text:   #155138;
  --status-success-border: #BFE5D2;

  --status-warning-bg:     #FCEFDE;
  --status-warning-text:   #6F3F0F;
  --status-warning-border: #F2D9B4;

  --status-error-bg:       #FBE6E2;
  --status-error-text:     #6F2218;
  --status-error-border:   #F2C5BD;

  /* --- Focus ring ------------------------------------------------------- */
  --focus-ring: var(--shadow-focus);
}


/* ===========================================================================
   Dark theme — semantic alias overrides only.
   =========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-page:        var(--slate-900);
    --surface-raised:      var(--slate-800);
    --surface-sunken:      var(--slate-950);
    /* Dark enough that --text-link-on-light (brand glow) clears 4.5:1 on it —
       .badge, .pill, and the sidebar academic note all use that pairing. */
    --surface-callout:     #083344;
    --surface-tint:        #0B2A38;

    --text-primary:        var(--slate-50);
    --text-secondary:      var(--slate-200);
    --text-muted:          var(--slate-300);
    --text-subtle:         var(--slate-400);
    --text-link-on-light:  var(--color-brand-glow);

    --border-default:      var(--slate-700);
    --border-strong:       var(--slate-600);
    --border-subtle:       var(--slate-800);

    --bg-code:             var(--slate-950);
    --bg-code-header:      var(--slate-800);
    --border-code:         var(--slate-700);
    --fg-code:             var(--slate-100);

    --card-bg:             var(--slate-800);
    --card-bg-hover:       var(--slate-700);
    --card-border:         var(--slate-700);

    --action-destructive-hover: #E55F4F;

    --status-success-bg:     #1C3A2D;
    --status-success-text:   #C8F5DD;
    --status-success-border: #2C5A45;

    --status-warning-bg:     #3A2F14;
    --status-warning-text:   #FFE2A8;
    --status-warning-border: #5C4A22;

    --status-error-bg:       #3A1E18;
    --status-error-text:     #FFC4BC;
    --status-error-border:   #6B302A;

    --shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, 0.30);
    --shadow-sm:  0 1px 3px 0 rgba(0, 0, 0, 0.35);
    --shadow-md:  0 2px 8px -1px rgba(0, 0, 0, 0.40);
    --shadow-lg:  0 4px 16px -2px rgba(0, 0, 0, 0.45);
    --shadow-xl:  0 8px 24px -4px rgba(0, 0, 0, 0.50);
    --shadow-2xl: 0 16px 48px -8px rgba(0, 0, 0, 0.60);
  }
}

[data-theme="dark"] {
  --surface-page:        var(--slate-900);
  --surface-raised:      var(--slate-800);
  --surface-sunken:      var(--slate-950);
  --surface-callout:     #083344;
  --surface-tint:        #0B2A38;

  --text-primary:        var(--slate-50);
  --text-secondary:      var(--slate-300);
  --text-muted:          var(--slate-400);
  --text-subtle:         var(--slate-400); /* matches system dark mode; slate-500 fails normal-text contrast */
  --text-link-on-light:  var(--color-brand-glow);

  --border-default:      var(--slate-700);
  --border-strong:       var(--slate-600);
  --border-subtle:       var(--slate-800);

  --bg-code:             var(--slate-950);
  --bg-code-header:      var(--slate-800);
  --border-code:         var(--slate-700);
  --fg-code:             var(--slate-100);

  --card-bg:             var(--slate-800);
  --card-bg-hover:       var(--slate-700);
  --card-border:         var(--slate-700);

  --action-destructive-hover: #E55F4F;

  --status-success-bg:     #1C3A2D;
  --status-success-text:   #7EE5AE;
  --status-success-border: #2C5A45;

  --status-warning-bg:     #3A2F14;
  --status-warning-text:   #F5C97A;
  --status-warning-border: #5C4A22;

  --status-error-bg:       #3A1E18;
  --status-error-text:     #F5A29A;
  --status-error-border:   #6B302A;

  --shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, 0.30);
  --shadow-sm:  0 1px 3px 0 rgba(0, 0, 0, 0.35);
  --shadow-md:  0 2px 8px -1px rgba(0, 0, 0, 0.40);
  --shadow-lg:  0 4px 16px -2px rgba(0, 0, 0, 0.45);
  --shadow-xl:  0 8px 24px -4px rgba(0, 0, 0, 0.50);
  --shadow-2xl: 0 16px 48px -8px rgba(0, 0, 0, 0.60);
}


/* ===========================================================================
   Reduced motion
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:   0ms;
    --dur-normal: 0ms;
    --dur-slow:   0ms;
    --dur-reveal: 0ms;
  }
}