/* ───────────────────────────────────────────────────────────────
   Alchemis Design System — Colors & Type
   "The science behind the spell."

   Pulled verbatim from the Alchemis web-angular SCSS theme system:
     web-angular/src/styles/_variables.scss
     web-angular/src/styles/_theme-dark.scss
   Token names mirror the --theme-* CSS custom properties used in
   production so designs drop in 1:1.
   ─────────────────────────────────────────────────────────────── */

/* ---- Webfonts (self-hosted from fonts/) ----
   Poppins ships as discrete TTFs at weights 400/500/600/700.
   Inter ships as two variable TTFs — wght 100..900 across opsz 14..32. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Poppins-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Poppins-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Poppins-Bold.ttf') format('truetype');
}

/* Inter — variable font, single file covers all weights via wght axis. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-VariableFont.ttf') format('truetype-variations');
  font-variation-settings: 'opsz' 14;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-Italic-VariableFont.ttf') format('truetype-variations');
  font-variation-settings: 'opsz' 14;
}

/* JetBrains Mono — not provided; falls back to OS mono stack. */

:root {
  /* ─────────── Brand colors (literal) ─────────── */
  --brand-charcoal:   #1C1C1E;  /* Primary / dark backgrounds */
  --brand-gold:       #D4AF37;  /* Accent — the spell */
  --brand-sage:       #A3B18A;  /* Secondary — herbal / organic / success-adjacent */
  --brand-frost:      #88C0D0;  /* Highlight — misty teal / info / active */
  --brand-paper:      #F8F8F5;  /* Off-white — light surfaces, labels */
  --brand-aubergine:  #2C1B3F;  /* Wordmark background (logo-with-text.png) — not in theme tokens, used in marketing assets */

  /* Status (semantic, lifted from _variables.scss) */
  --status-error:     #f44336;
  --status-warning:   #ff9800;
  --status-success:   #4caf50;
  --status-info:      #2196f3;

  /* ─────────── Dark theme (default — Alchemis ships dark-first) ─────────── */
  --theme-bg-primary:    #0d0d0e;
  --theme-bg-secondary:  #1a1a1c;
  --theme-bg-tertiary:   #242426;
  --theme-bg-elevated:   #2d2d30;

  --theme-text-primary:    rgba(255, 255, 255, 0.95);
  --theme-text-secondary:  rgba(255, 255, 255, 0.75);
  --theme-text-tertiary:   rgba(255, 255, 255, 0.60);
  --theme-text-disabled:   rgba(255, 255, 255, 0.38);

  --theme-border-subtle:   rgba(255, 255, 255, 0.06);
  --theme-border-medium:   rgba(255, 255, 255, 0.12);
  --theme-border-strong:   rgba(255, 255, 255, 0.20);
  --theme-border-default:  var(--theme-border-medium);

  --theme-accent: var(--brand-gold);
  --theme-sage:   var(--brand-sage);
  --theme-frost:  var(--brand-frost);
  --theme-gold:   var(--brand-gold);

  --theme-shadow-sm: 0 2px 4px  rgba(0, 0, 0, 0.40);
  --theme-shadow-md: 0 4px 8px  rgba(0, 0, 0, 0.50);
  --theme-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.60);
  --theme-shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.70);

  --theme-hover-bg:   rgba(255, 255, 255, 0.08);
  --theme-active-bg:  rgba(255, 255, 255, 0.12);
  --theme-focus-ring: rgba(212, 175, 55, 0.50);

  --theme-warn:    var(--status-warning);
  --theme-success: var(--status-success);

  /* ─────────── Paper-white print palette ───────────
     For label previews & physical-media mocks ONLY. Don't mix with UI tokens. */
  --paper-bg:        #f5f5f5;
  --paper-ink:       #1a1a1a;
  --paper-ink-dim:   #555555;
  --paper-ink-muted: #9e9e9e;
  --paper-rule:      #e0e0e0;

  /* ─────────── Spacing scale ─────────── */
  --space-micro: 1px;
  --space-xxs:   2px;
  --space-xs:    4px;
  --space-sm:    8px;
  --space-md:    16px;
  --space-lg:    24px;
  --space-xl:    32px;
  --space-xxl:   48px;

  /* ─────────── Radius scale ─────────── */
  --radius-sm:  4px;
  --radius-md:  8px;   /* default */
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-xxl: 24px;
  --radius-pill: 999px;

  /* ─────────── Typography ─────────── */
  --font-heading: 'Poppins', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, monospace;

  /* Type scale — clamps mirror dark.dark-heading() mixin */
  --type-display: 600 clamp(2.5rem, 5vw, 3.5rem) / 1.1 var(--font-heading);
  --type-h1:      600 clamp(2rem, 4vw, 3rem)     / 1.15 var(--font-heading);
  --type-h2:      600 clamp(1.5rem, 3vw, 2rem)   / 1.2  var(--font-heading);
  --type-h3:      600 1.25rem / 1.3  var(--font-heading);
  --type-h4:      600 1.0625rem / 1.35 var(--font-heading);
  --type-body:    400 1rem / 1.6  var(--font-body);
  --type-body-sm: 400 0.875rem / 1.5 var(--font-body);
  --type-caption: 500 0.75rem / 1.4 var(--font-body);
  --type-eyebrow: 500 0.75rem / 1.4 var(--font-body); /* paired with text-transform/letter-spacing — see .eyebrow */
  --type-code:    400 0.875rem / 1.5 var(--font-mono);

  /* Breakpoints (for media query reference) */
  --bp-sm:  576px;
  --bp-md:  768px;
  --bp-lg:  992px;
  --bp-xl:  1200px;
  --bp-xxl: 1400px;
}

/* ─────────── Light theme — opt-in via [data-theme="light"] ─────────── */
[data-theme="light"] {
  --theme-bg-primary:   #ffffff;
  --theme-bg-secondary: var(--brand-paper);
  --theme-bg-tertiary:  #efefe9;
  --theme-bg-elevated:  #ffffff;

  --theme-text-primary:   var(--brand-charcoal);
  --theme-text-secondary: rgba(28, 28, 30, 0.80);
  --theme-text-tertiary:  rgba(28, 28, 30, 0.60);
  --theme-text-disabled:  rgba(28, 28, 30, 0.38);

  --theme-border-subtle:  rgba(28, 28, 30, 0.08);
  --theme-border-medium:  rgba(28, 28, 30, 0.15);
  --theme-border-strong:  rgba(28, 28, 30, 0.30);
  --theme-border-default: var(--theme-border-medium);

  --theme-shadow-sm: 0 1px 3px  rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --theme-shadow-md: 0 4px 6px  rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.10);
  --theme-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.10);
  --theme-shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.20), 0 4px 8px rgba(0, 0, 0, 0.10);

  --theme-hover-bg:  rgba(28, 28, 30, 0.04);
  --theme-active-bg: rgba(28, 28, 30, 0.08);
}

/* ─────────── Base reset + body ─────────── */
body {
  font: var(--type-body);
  color: var(--theme-text-primary);
  background: var(--theme-bg-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─────────── Semantic type classes ─────────── */
.display { font: var(--type-display); color: var(--theme-text-primary); margin: 0; letter-spacing: -0.02em; }
h1, .h1 { font: var(--type-h1); color: var(--theme-text-primary); margin: 0; letter-spacing: -0.015em; }
h2, .h2 { font: var(--type-h2); color: var(--theme-text-primary); margin: 0; letter-spacing: -0.01em; }
h3, .h3 { font: var(--type-h3); color: var(--theme-text-primary); margin: 0; }
h4, .h4 { font: var(--type-h4); color: var(--theme-text-primary); margin: 0; }

p, .body { font: var(--type-body); color: var(--theme-text-secondary); margin: 0; }
.body-sm  { font: var(--type-body-sm); color: var(--theme-text-secondary); }
.caption  { font: var(--type-caption); color: var(--theme-text-tertiary); }
code, .code { font: var(--type-code); color: var(--theme-text-primary); background: var(--theme-bg-tertiary); padding: 1px 6px; border-radius: var(--radius-sm); }

/* The Alchemis "eyebrow" — appears above every page header.
   Uppercase, wide tracking, gold. Pulled straight from dark.dark-eyebrow(). */
.eyebrow {
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.3rem;
  color: var(--theme-gold);
  margin: 0;
}

/* Italic 'cauldron text' — the welcome line on the dashboard, the celebration
   subtitle, etc. Use sparingly; only for spell-talk. */
.cauldron-text {
  font: 400 1.125rem / 1.7 var(--font-body);
  font-style: italic;
  color: var(--theme-text-secondary);
}