/* ==========================================================================
   VENUS RARE EARTH METALS — DESIGN TOKENS
   Single source of truth for palette, type, spacing, radius, shadow, motion.
   Spec: discovery/stage-2/04_VISUAL_DESIGN_SYSTEM.md
   Change a brand value here; components consume the variables (no hard-coded
   colours in components.css). This keeps a rebrand / logo revision cheap.
   ========================================================================== */

:root {
  /* --- Brand accent (copper) — disciplined accent, ~<=10% of any screen --- */
  --copper-300: #E8A87C;
  --copper-500: #B87333;
  --copper-600: #8C5A2B;
  --copper-900: #5A3A22;

  /* --- Neutral / background surfaces --- */
  --ink-900:   #14110E;
  --ink-800:   #1E1A16;
  --paper-50:  #F5F1EC;
  --paper-100: #ECE6DE;
  --line-200:  #D8D0C6;
  --line-800:  #2C261F;

  /* --- Secondary / support --- */
  --steel-300: #9AA7B1;
  --steel-500: #5B6B78;

  /* --- Text --- */
  --text-strong:  #1A1712;
  --text-muted:   #5C554C;
  --text-on-dark: #EDE7DF;
  --text-on-dark-muted: #B9B0A5;

  /* --- Semantic (functional, muted) --- */
  --success: #2E7D5B;
  --warning: #B5892B;
  --danger:  #A83A2C;
  --focus:   #2F6FB0;

  /* --- Role tokens (components reference these, not raw palette) --- */
  --bg-page:        var(--paper-50);
  --bg-surface:     var(--paper-100);
  --bg-dark:        var(--ink-900);
  --bg-dark-alt:    var(--ink-800);
  --color-text:     var(--text-strong);
  --color-text-muted: var(--text-muted);
  --color-accent:   var(--copper-500);
  --color-accent-strong: var(--copper-600);
  --color-border:   var(--line-200);
  --color-border-dark: var(--line-800);
  --color-link:     var(--copper-600);
  --color-link-hover: var(--copper-900);

  /* --- Typography ---
     Manrope (self-hosted variable, see base.css @font-face) is the single site
     face for headings + body — same face as the homepage hero, so the site is
     typographically unified. System stack is the graceful fallback. */
  --font-heading: "Manrope", system-ui, -apple-system,
                  "Segoe UI", Roboto, Arial, sans-serif;
  --font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", Roboto,
                  Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo,
                  Consolas, monospace;

  /* Fluid type scale (clamp: min, preferred, max) */
  --fs-display: clamp(2.125rem, 1.4rem + 3.2vw, 4rem);   /* 34 -> 64 */
  --fs-h1:      clamp(1.75rem, 1.3rem + 2vw, 3rem);      /* 28 -> 48 */
  --fs-h2:      clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);/* 24 -> 34 */
  --fs-h3:      clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); /* 20 -> 24 */
  --fs-body:    clamp(1rem, 0.97rem + 0.15vw, 1.125rem); /* 16 -> 18 */
  --fs-small:   clamp(0.8125rem, 0.79rem + 0.1vw, 0.9375rem); /* 13 -> 15 */

  --lh-tight: 1.15;
  --lh-heading: 1.2;
  --lh-body: 1.6;
  --measure: 68ch;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Spacing (8px base) --- */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-24: 6rem;    /* 96 */
  --space-32: 8rem;    /* 128 */

  /* Section vertical rhythm (responsive) */
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 8rem); /* 56 -> 128 */

  /* --- Radius --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* --- Borders --- */
  --border-hairline: 1px solid var(--color-border);
  --border-hairline-dark: 1px solid var(--color-border-dark);
  --border-accent: 2px solid var(--color-accent);

  /* --- Shadows (restrained) --- */
  --shadow-sm: 0 1px 2px rgba(20, 17, 14, 0.06);
  --shadow-md: 0 4px 16px rgba(20, 17, 14, 0.10);
  --shadow-lg: 0 12px 32px rgba(20, 17, 14, 0.14);

  /* --- Layout --- */
  --container-max: 1320px;      /* aligns with Bootstrap xxl */
  --header-h: 72px;
  --header-h-scrolled: 60px;
  --z-header: 1030;             /* above Bootstrap default content */
  --z-skiplink: 1080;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.16, 0.84, 0.3, 1);
  /* Motion scale (Stage 4): MICRO / STANDARD / CINEMATIC */
  --dur-micro: 160ms;
  --dur-standard: 280ms;
  --dur-cinematic: 1100ms;
  --dur-reveal: 560ms;
  --reveal-shift: 16px;

  /* Depth & material language (Stage 4) */
  --grid-line-dark: rgba(232, 168, 124, 0.07);  /* copper-tinted grid on dark */
  --grid-line-light: rgba(20, 17, 14, 0.045);   /* faint grid on light */
  --grid-size: 46px;
  --glow-copper: rgba(184, 115, 51, 0.22);
  --glow-copper-soft: rgba(184, 115, 51, 0.12);
  --tilt-max: 6;        /* degrees; read by interactions in main.js */
  --parallax-range: 24; /* px; read by interactions in main.js */
}