/* ============================================================
   LAPLAND LOGIC — Design Token CSS
   Arctic Palette + Typography System
   Base grid: 8px
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@300;400;500;600&display=swap');

/* ============================================================
   COLOR TOKENS
   ============================================================ */
:root {
  /* --- Base Palette --- */
  --color-navy:        #0F172A;   /* Deep Arctic Navy   */
  --color-anthracite:  #1E293B;   /* Slate Anthracite   */
  --color-ice:         #38BDF8;   /* Glacial Ice Blue   */
  --color-frost:       #F8FAFC;   /* Frost White        */

  /* --- Expanded shades --- */
  --color-navy-900:    #0F172A;
  --color-navy-800:    #1E293B;
  --color-navy-700:    #334155;
  --color-navy-600:    #475569;
  --color-navy-500:    #64748B;
  --color-navy-400:    #94A3B8;
  --color-navy-300:    #CBD5E1;
  --color-navy-200:    #E2E8F0;
  --color-navy-100:    #F1F5F9;
  --color-navy-50:     #F8FAFC;

  --color-ice-900:     #0C4A6E;
  --color-ice-700:     #0369A1;
  --color-ice-500:     #0EA5E9;
  --color-ice-400:     #38BDF8;
  --color-ice-300:     #7DD3FC;
  --color-ice-200:     #BAE6FD;
  --color-ice-100:     #E0F2FE;

  /* --- Semantic / Dark-surface (default) --- */
  --color-bg:          var(--color-navy);        /* Page background     */
  --color-bg-surface:  var(--color-anthracite);  /* Card / panel        */
  --color-bg-elevated: #243147;                  /* Elevated panel      */
  --color-fg:          var(--color-frost);        /* Primary text        */
  --color-fg-muted:    #94A3B8;                  /* Secondary text      */
  --color-fg-subtle:   #475569;                  /* Placeholder / hint  */
  --color-accent:      var(--color-ice);         /* CTA / link / active */
  --color-accent-dim:  rgba(56, 189, 248, 0.15); /* Accent fill         */
  --color-border:      rgba(255,255,255,0.08);   /* Dark surface border */
  --color-border-muted:rgba(255,255,255,0.04);   /* Subtle divider      */

  /* --- Light-surface overrides (apply .light class to root) --- */
  --color-bg-light:          var(--color-frost);
  --color-bg-surface-light:  #FFFFFF;
  --color-fg-light:          var(--color-navy);
  --color-fg-muted-light:    #64748B;
  --color-border-light:      #CBD5E1;

  /* --- Status colors --- */
  --color-success:  #22C55E;
  --color-warning:  #F59E0B;
  --color-danger:   #EF4444;
  --color-info:     var(--color-ice);
}

/* Light mode class */
.light {
  --color-bg:         var(--color-bg-light);
  --color-bg-surface: var(--color-bg-surface-light);
  --color-fg:         var(--color-fg-light);
  --color-fg-muted:   var(--color-fg-muted-light);
  --color-border:     var(--color-border-light);
}

/* ============================================================
   TYPOGRAPHY TOKENS
   ============================================================ */
:root {
  /* --- Font families --- */
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  'IBM Plex Mono', 'Fira Code', monospace;

  /* --- Type scale (8px grid) --- */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   48px;
  --text-4xl:   64px;
  --text-5xl:   80px;

  /* --- Font weights --- */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* --- Line heights --- */
  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;
  --lh-loose:   1.8;

  /* --- Letter spacing --- */
  --ls-tight:   -0.03em;
  --ls-normal:   0;
  --ls-wide:     0.05em;
  --ls-wider:    0.1em;
  --ls-widest:   0.2em;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

/* Display — hero numbers, large statements */
.display-xl {
  font-family: var(--font-sans);
  font-size: var(--text-5xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-fg);
}

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-fg);
}

h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--color-fg);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-fg);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--color-fg);
}

h5, .h5 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  color: var(--color-fg);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-fg);
}

.body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-fg-muted);
}

/* Label — section markers, form labels */
.label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

/* Tagline — e.g. "CLEAR THINKING . REAL SYSTEMS" */
.tagline {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

/* Code / data layer */
code, pre, .mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-accent);
}

/* ============================================================
   SPACING SCALE (8px grid)
   ============================================================ */
:root {
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32: 128px;
}

/* ============================================================
   BORDER RADIUS SCALE
   ============================================================ */
:root {
  --radius-none:  0;
  --radius-sm:    2px;
  --radius-base:  4px;   /* Default for all components */
  --radius-md:    6px;
  --radius-lg:    8px;
  --radius-pill:  9999px;
}

/* ============================================================
   SHADOW SCALE
   ============================================================ */
:root {
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4), 0 1px 6px rgba(0,0,0,0.2);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.3), 0 1px 4px rgba(0,0,0,0.2);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.5);
  --shadow-accent: 0 0 0 1px var(--color-accent), 0 0 16px rgba(56,189,248,0.2);
  --shadow-focus: 0 0 0 2px var(--color-accent);
}

/* ============================================================
   TRANSITION / ANIMATION TOKENS
   ============================================================ */
:root {
  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --transition-base: var(--duration-base) var(--ease-default);
}