/* ========================================================================
   RMC Engineering — Option B: Editorial Technical
   Design Tokens · Warm off-white, brand teal, copper accent
   Primary ink #004252 pulled from the R in the RMC gradient logo.
   ======================================================================== */

:root {
  /* === Color · Light (primary) === */
  --bg:              #F5F1EA;   /* warm off-white */
  --bg-elevated:     #EFE9DE;   /* card / section alt */
  --bg-inset:        #E5DDD0;   /* deep tan inset */
  --ink:             #004252;   /* brand dark teal — body text (from logo R) */
  --ink-soft:        #2C5C68;   /* secondary text — teal-shifted */
  --ink-muted:       #5F7A82;   /* tertiary / captions */
  --ink-faint:       #A3B4B8;   /* placeholders, hairlines */
  --rule:            #C9C0B0;   /* editorial rules & dividers */
  --rule-soft:       #DDD5C6;   /* subtle rules */

  /* Accent — copper/rust, used sparingly */
  --accent:          #B4614A;
  --accent-hover:    #94472F;
  --accent-soft:     #E8C9BC;   /* wash */

  /* Semantic */
  --success:         #4A7A3A;
  --warning:         #A16A1C;
  --error:           #9C3B3B;

  /* === Typography ===
     Single signature typeface throughout: Verdana.
     Hierarchy is created via weight (400/700), size, and case — not multiple fonts.
     Italic variant used sparingly for editorial accents. */
  --font-display:    Verdana, Geneva, sans-serif;
  --font-body:       Verdana, Geneva, sans-serif;
  --font-mono:       Verdana, Geneva, sans-serif;

  /* Modular type scale — tuned for Verdana (wider glyphs than serif; sizes trimmed) */
  --text-xs:     0.6875rem;  /* 11px — labels, captions */
  --text-sm:     0.8125rem;  /* 13px — small body */
  --text-base:   1rem;       /* 16px — body */
  --text-lg:     1.125rem;   /* 18px — large body / lead */
  --text-xl:     1.375rem;   /* 22px — small headings */
  --text-2xl:    1.75rem;    /* 28px — section headings */
  --text-3xl:    2.25rem;    /* 36px — page headings */
  --text-4xl:    3rem;       /* 48px — display */
  --text-5xl:    4rem;       /* 64px — hero display */
  --text-6xl:    5.5rem;     /* 88px — mega hero */

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

  /* Letter spacing */
  --tracking-tight:   -0.03em;
  --tracking-snug:    -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.16em;

  /* Weights (General Sans available: 300-700) */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* === Spacing (8px base) === */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  3rem;      /* 48px */
  --space-8:  4rem;      /* 64px */
  --space-9:  6rem;      /* 96px */
  --space-10: 8rem;      /* 128px */
  --space-11: 10rem;     /* 160px */
  --space-12: 14rem;     /* 224px — editorial breathing room */

  /* === Layout === */
  --max-content:      680px;    /* editorial measure ~66ch */
  --max-container:    1360px;   /* outer content boundary */
  --max-wide:         1600px;   /* full-bleed constrained */
  --gutter:           clamp(1.25rem, 4vw, 3rem);

  /* === Radius === */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   22px;

  /* === Shadow (used minimally in editorial style) === */
  --shadow-sm: 0 1px 2px rgba(10, 31, 46, 0.04), 0 1px 3px rgba(10, 31, 46, 0.06);
  --shadow-md: 0 4px 8px rgba(10, 31, 46, 0.05), 0 8px 24px rgba(10, 31, 46, 0.08);
  --shadow-lg: 0 12px 32px rgba(10, 31, 46, 0.10);

  /* === Motion === */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:      180ms;
  --dur-base:      320ms;
  --dur-slow:      600ms;
  --dur-editorial: 900ms;

  /* === Z-index === */
  --z-base:    1;
  --z-sticky:  100;
  --z-header:  200;
  --z-overlay: 500;
  --z-modal:   1000;
}

/* Dark mode support — we don't build it in Phase 1 but tokens are ready */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg:          #0A1418;
    --bg-elevated: #101A20;
    --bg-inset:    #17232B;
    --ink:         #EDE7DA;
    --ink-soft:    #B8B0A0;
    --ink-muted:   #8A8578;
    --ink-faint:   #5A5750;
    --rule:        #2E3841;
    --rule-soft:   #1E2830;
    --accent:      #D48364;
    --accent-hover:#E89A7C;
    --accent-soft: #3A2419;
  }
}