/*
 * Nucleus Brain Design Tokens — CSS Custom Properties
 *
 * Generated from tokens.json. Every value traces to the 24 polymathic
 * design principles in research/design-principles-polymathic.md.
 *
 * Usage: link or import this file, then reference --nucleus-* properties.
 * All sizes in px unless noted. Colors are hex or rgba.
 */

/* ==========================================================================
   Grid (Principle 1: The Governing Grid — Muller-Brockmann, Swiss Style)
   ========================================================================== */

:root {
  --nucleus-grid-base-unit: 8px;
  --nucleus-grid-columns: 12;
  --nucleus-grid-gutter: 24px;
  --nucleus-grid-margin: 48px;
  --nucleus-grid-max-width: 1200px;

  /* Breakpoints */
  --nucleus-bp-sm: 640px;
  --nucleus-bp-md: 768px;
  --nucleus-bp-lg: 1024px;
  --nucleus-bp-xl: 1280px;
  --nucleus-bp-2xl: 1536px;
}

/* ==========================================================================
   Typography (Principles 2, 7, 8, 9: Golden Hierarchy, Voice, Measure, Weight)
   Major third scale (1.25): 10, 13, 16, 20, 25, 31, 39, 49
   ========================================================================== */

:root {
  --nucleus-font-sans: Inter, system-ui, -apple-system, sans-serif;
  --nucleus-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  --nucleus-type-scale-ratio: 1.25;
  --nucleus-type-base: 16px;

  /* Type scale — named sizes */
  --nucleus-type-xs: 10px;
  --nucleus-type-sm: 13px;
  --nucleus-type-base: 16px;
  --nucleus-type-lg: 20px;
  --nucleus-type-xl: 25px;
  --nucleus-type-2xl: 31px;
  --nucleus-type-3xl: 39px;
  --nucleus-type-4xl: 49px;

  /* Line heights */
  --nucleus-leading-tight: 1.25;
  --nucleus-leading-normal: 1.5;
  --nucleus-leading-relaxed: 1.75;

  /* Letter spacing */
  --nucleus-tracking-tight: -0.02em;
  --nucleus-tracking-normal: 0em;
  --nucleus-tracking-wide: 0.02em;

  /* Font weights — semibold max for headings (never bold, per principle 7) */
  --nucleus-weight-regular: 400;
  --nucleus-weight-medium: 500;
  --nucleus-weight-semibold: 600;

  /* Measure — optimal line length for body text (principle 8: Bringhurst) */
  --nucleus-measure-min: 45ch;
  --nucleus-measure-optimal: 66ch;
  --nucleus-measure-max: 75ch;
  --nucleus-measure-narrow-min: 30ch;
  --nucleus-measure-narrow-max: 40ch;
  --nucleus-measure-body-max-width: 680px;
  --nucleus-measure-content-max-width: 720px;
}

/* ==========================================================================
   Spacing (Principles 1, 3, 5: Grid, Negative Space, Proximity)
   8pt grid: 0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128
   ========================================================================== */

:root {
  --nucleus-space-none: 0px;
  --nucleus-space-2xs: 4px;
  --nucleus-space-xs: 8px;
  --nucleus-space-sm: 12px;
  --nucleus-space-md: 16px;
  --nucleus-space-lg: 24px;
  --nucleus-space-xl: 32px;
  --nucleus-space-2xl: 48px;
  --nucleus-space-3xl: 64px;
  --nucleus-space-4xl: 96px;
  --nucleus-space-5xl: 128px;

  /* Semantic spacing */
  --nucleus-card-padding: 32px;
  --nucleus-card-gap: 24px;
  --nucleus-section-gap: 64px;
  --nucleus-intra-group: 8px;
  --nucleus-inter-group: 24px;
  --nucleus-page-padding-x: 48px;
  --nucleus-page-padding-y: 64px;
  --nucleus-hero-padding-y: 120px;
}

/* ==========================================================================
   Color — Light Mode (Principles 10, 11: Chromatic Restraint, Contrast)
   Near-monochromatic base; chromatic color reserved for semantic encoding.
   ========================================================================== */

:root,
[data-theme="light"] {
  /* Backgrounds */
  --nucleus-bg-primary: #FFFFFF;
  --nucleus-bg-secondary: #F8F9FA;
  --nucleus-bg-tertiary: #F1F3F5;
  --nucleus-bg-elevated: #FFFFFF;

  /* Foregrounds — contrast ratios against bg-primary:
     primary   #111827 on #FFF = 17.3:1 (exceeds 7:1 target)
     secondary #4B5563 on #FFF = 7.1:1  (meets 7:1 target)
     tertiary  #6B7280 on #FFF = 4.8:1  (de-emphasis, exceeds 3:1) */
  --nucleus-fg-primary: #111827;
  --nucleus-fg-secondary: #4B5563;
  --nucleus-fg-tertiary: #6B7280;
  --nucleus-fg-inverse: #FFFFFF;

  /* Borders */
  --nucleus-border-default: #E5E7EB;
  --nucleus-border-subtle: #F3F4F6;
  --nucleus-border-strong: #D1D5DB;

  /* Accent — brand indigo */
  --nucleus-accent-primary: #4F46E5;
  --nucleus-accent-primary-hover: #4338CA;
  --nucleus-accent-primary-subtle: #EEF2FF;
}

/* ==========================================================================
   Color — Dark Mode
   ========================================================================== */

[data-theme="dark"] {
  --nucleus-bg-primary: #0F1117;
  --nucleus-bg-secondary: #1A1D27;
  --nucleus-bg-tertiary: #252833;
  --nucleus-bg-elevated: #1E2130;

  /* Foregrounds — contrast ratios against bg-primary (#0F1117):
     primary   #F3F4F6 on #0F1117 = 16.1:1
     secondary #9CA3AF on #0F1117 = 6.8:1
     tertiary  #6B7280 on #0F1117 = 4.1:1 */
  --nucleus-fg-primary: #F3F4F6;
  --nucleus-fg-secondary: #9CA3AF;
  --nucleus-fg-tertiary: #6B7280;
  --nucleus-fg-inverse: #111827;

  --nucleus-border-default: #2D3140;
  --nucleus-border-subtle: #1E2130;
  --nucleus-border-strong: #3B3F51;

  --nucleus-accent-primary: #818CF8;
  --nucleus-accent-primary-hover: #A5B4FC;
  --nucleus-accent-primary-subtle: #1E1B4B;
}

/* ==========================================================================
   Semantic Colors (status encoding — independent of theme)
   ========================================================================== */

:root {
  --nucleus-success: #059669;
  --nucleus-success-subtle: #D1FAE5;
  --nucleus-warning: #D97706;
  --nucleus-warning-subtle: #FEF3C7;
  --nucleus-error: #DC2626;
  --nucleus-error-subtle: #FEE2E2;
  --nucleus-info: #2563EB;
  --nucleus-info-subtle: #DBEAFE;
}

/* ==========================================================================
   Data Visualization Colors (Principle 10, 13: Restraint + Encoding)
   6-color categorical palette — perceptually distinct, colorblind-safe pairs.
   ========================================================================== */

:root {
  --nucleus-data-cat-1: #4F46E5;
  --nucleus-data-cat-2: #0891B2;
  --nucleus-data-cat-3: #7C3AED;
  --nucleus-data-cat-4: #059669;
  --nucleus-data-cat-5: #D97706;
  --nucleus-data-cat-6: #DC2626;

  /* Sequential (single-hue indigo ramp, lightest=lowest) */
  --nucleus-data-seq-1: #EEF2FF;
  --nucleus-data-seq-2: #C7D2FE;
  --nucleus-data-seq-3: #A5B4FC;
  --nucleus-data-seq-4: #818CF8;
  --nucleus-data-seq-5: #6366F1;
  --nucleus-data-seq-6: #4F46E5;
  --nucleus-data-seq-7: #4338CA;
  --nucleus-data-seq-8: #3730A3;

  /* Diverging: red (negative) — neutral — green (positive) */
  --nucleus-data-div-neg-4: #DC2626;
  --nucleus-data-div-neg-3: #EF4444;
  --nucleus-data-div-neg-2: #F87171;
  --nucleus-data-div-neg-1: #FCA5A5;
  --nucleus-data-div-neutral: #F3F4F6;
  --nucleus-data-div-pos-1: #86EFAC;
  --nucleus-data-div-pos-2: #4ADE80;
  --nucleus-data-div-pos-3: #22C55E;
  --nucleus-data-div-pos-4: #16A34A;
}

/* ==========================================================================
   Proportion (Principle 2: Golden Hierarchy — phi = 1.618)
   ========================================================================== */

:root {
  --nucleus-phi: 1.618;
  --nucleus-golden-major: 61.8%;
  --nucleus-golden-minor: 38.2%;
}

/* ==========================================================================
   Motion (Principles 16, 17: Purposeful Motion, Rhythmic Consistency)
   Every animation communicates; purposeless motion is noise.
   ========================================================================== */

:root {
  --nucleus-duration-instant: 100ms;
  --nucleus-duration-fast: 150ms;
  --nucleus-duration-normal: 300ms;
  --nucleus-duration-slow: 500ms;
  --nucleus-duration-page: 400ms;

  --nucleus-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --nucleus-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --nucleus-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --nucleus-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --nucleus-scroll-reveal-y: 30px;
  --nucleus-scroll-reveal-stagger: 100ms;
}

/* ==========================================================================
   Shadows / Elevation (Principle 4: Figure-Ground Clarity)
   ========================================================================== */

:root {
  --nucleus-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --nucleus-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --nucleus-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --nucleus-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Utility: Focus ring for accessibility
   ========================================================================== */

:root {
  --nucleus-focus-ring: 0 0 0 2px var(--nucleus-bg-primary), 0 0 0 4px var(--nucleus-accent-primary);
}

/* ==========================================================================
   Cognitive / Interactive Constants (Principle 14: Progressive Disclosure)
   Encoded as CSS for reference; primarily consumed by JS validators.
   ========================================================================== */

:root {
  --nucleus-min-touch-target: 44px;
  --nucleus-min-cta-height: 48px;
  --nucleus-min-cta-width: 200px;
}