/* ============================================================
   Shearstone — Colors & Type
   ------------------------------------------------------------
   Brand DNA: precision (offset slabs), warmth (bone, gold),
   gravitas (deep navy, wide-tracked Raleway).
   ============================================================ */

/* --- Webfonts -------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&family=IBM+Plex+Mono:wght@300;400;500;600&family=Raleway:wght@300;400&display=swap');

:root {
  /* ============================================================
     COLORS — primitives
     ============================================================ */

  /* Navy — primary brand, used for headlines, ink, deep surfaces */
  --navy-950: #0E1822;
  --navy-900: #14222F;
  --navy-800: #1C2D40;   /* PRIMARY brand navy */
  --navy-700: #2A3D52;
  --navy-600: #3D5168;
  --navy-500: #56697E;
  --navy-400: #7A8FA3;   /* Steel — secondary text */
  --navy-300: #9AACBA;
  --navy-200: #C2CDD8;
  --navy-100: #DEE5EC;
  --navy-50:  #EEF1F5;

  /* Copper — accent, used sparingly. The middle slab. */
  --umber-900: #3D2510;
  --umber-800: #5A361A;
  --umber-700: #8A5424;
  --umber-600: #B87333;   /* PRIMARY brand copper */   /* PRIMARY brand umber */
  --umber-500: #C8854A;
  --umber-400: #D69B68;
  --umber-300: #E2B58D;
  --umber-200: #EDCFB2;
  --umber-100: #F5E2CD;
  --umber-50:  #FBF1E6;

  /* Legacy gold-* aliases retained so older work keeps rendering — point to umber. */
  --gold-900: var(--umber-900);
  --gold-800: var(--umber-800);
  --gold-700: var(--umber-700);
  --gold-600: var(--umber-600);
  --gold-500: var(--umber-500);
  --gold-400: var(--umber-400);
  --gold-300: var(--umber-300);
  --gold-200: var(--umber-200);
  --gold-100: var(--umber-100);
  --gold-50:  var(--umber-50);

  /* Bone — warm neutral background (replaces pure white) */
  --bone-50:  #FAF9F7;
  --bone-100: #F2F1EF;   /* PRIMARY brand bone */
  --bone-200: #E8E5DF;
  --bone-300: #D8D3CA;
  --bone-400: #B8B0A2;
  --bone-500: #918878;

  /* Pure */
  --white: #FFFFFF;
  --black: #000000;

  /* Semantic accents — muted to match brand temperance */
  --success-600: #4A7C59;
  --success-100: #DCE8DF;
  --warn-600:    var(--umber-600);   /* umber doubles as warn */
  --warn-100:    var(--umber-100);
  --danger-600:  #A14238;
  --danger-100:  #F0DCD9;
  --info-600:    #4A6680;
  --info-100:    #D9E1EA;

  /* ============================================================
     COLORS — semantic tokens
     ============================================================ */

  /* Surfaces */
  --bg-canvas:    var(--bone-100);   /* page background */
  --bg-surface:   var(--white);      /* cards, panels */
  --bg-raised:    var(--white);      /* modals, popovers */
  --bg-sunken:    var(--bone-200);   /* code blocks, wells */
  --bg-inverse:   var(--navy-800);   /* dark sections */
  --bg-accent:    var(--umber-50);    /* umber-tinted highlight */

  /* Foreground / ink */
  --fg-primary:   var(--navy-800);   /* headlines, primary copy */
  --fg-secondary: var(--navy-500);   /* body text */
  --fg-tertiary:  var(--navy-400);   /* muted, captions */
  --fg-quaternary:var(--navy-300);   /* labels, eyebrows on light */
  --fg-on-dark:   var(--white);
  --fg-on-dark-2: var(--navy-300);
  --fg-accent:    var(--umber-700);   /* umber text on light bg */
  --fg-link:      var(--navy-800);

  /* Borders */
  --border-subtle:  rgba(28, 45, 64, 0.08);
  --border-default: rgba(28, 45, 64, 0.14);
  --border-strong:  rgba(28, 45, 64, 0.28);
  --border-accent:  var(--umber-600);
  --border-on-dark: rgba(255, 255, 255, 0.14);

  /* Brand swatches — use directly */
  --brand-navy:  var(--navy-800);
  --brand-umber: var(--umber-600);
  --brand-gold:  var(--umber-600);   /* alias for legacy refs */
  --brand-bone:  var(--bone-100);
  --brand-steel: var(--navy-400);

  /* ============================================================
     TYPE — primitives
     ============================================================ */

  --font-sans:    'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-wordmark:'Raleway', 'Inter Tight', sans-serif;   /* wordmark only — preserves the original lockup */
  --font-serif:   'Source Serif 4', 'Iowan Old Style', 'Charter', Georgia, serif;
  --font-mono:    'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  /* Tracking — Shearstone leans wide on display copy */
  --tracking-tightest: -0.02em;
  --tracking-tight:    -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.12em;
  --tracking-widest:   0.2em;       /* SHEARSTONE wordmark */
  --tracking-eyebrow:  0.42em;      /* eyebrow labels, category tags */

  /* Weights */
  --weight-thin:    200;
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

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

  /* Sizes — modest scale, gravitas over impact */
  --size-xs:   12px;
  --size-sm:   14px;
  --size-base: 16px;
  --size-md:   18px;
  --size-lg:   20px;
  --size-xl:   24px;
  --size-2xl:  32px;
  --size-3xl:  40px;
  --size-4xl:  52px;
  --size-5xl:  68px;
  --size-6xl:  88px;

  /* ============================================================
     SPACING / RADIUS / SHADOW / MOTION
     ============================================================ */

  --space-0:  0;
  --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;

  /* Radii — architectural. Very tight by default. */
  --radius-none: 0;
  --radius-xs:   1px;     /* the slab corners */
  --radius-sm:   2px;
  --radius-md:   4px;     /* default card */
  --radius-lg:   6px;
  --radius-xl:   8px;
  --radius-pill: 999px;

  /* Shadows — soft, low, never glowy */
  --shadow-xs: 0 1px 2px rgba(28, 45, 64, 0.04);
  --shadow-sm: 0 2px 4px rgba(28, 45, 64, 0.05), 0 1px 2px rgba(28, 45, 64, 0.04);
  --shadow-md: 0 6px 16px rgba(28, 45, 64, 0.06), 0 2px 4px rgba(28, 45, 64, 0.04);
  --shadow-lg: 0 16px 36px rgba(28, 45, 64, 0.08), 0 4px 8px rgba(28, 45, 64, 0.04);
  --shadow-xl: 0 28px 60px rgba(28, 45, 64, 0.12), 0 8px 16px rgba(28, 45, 64, 0.06);
  --shadow-inset: inset 0 1px 2px rgba(28, 45, 64, 0.06);
  --shadow-accent: 0 6px 20px rgba(184, 115, 51, 0.26);

  /* Motion — measured. Nothing bouncy. */
  --ease-standard:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out:       cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:        cubic-bezier(0.4, 0.0, 1, 1);
  --ease-deliberate:cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast:    120ms;
  --duration-base:    200ms;
  --duration-slow:    320ms;
  --duration-slower:  500ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Use directly: <h1>, <p class="eyebrow">, etc.
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--size-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-secondary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — for hero headlines. Serif, light weight, tight leading. */
.display-1, .display-2 {
  font-family: var(--font-serif);
  color: var(--fg-primary);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.display-1 { font-size: var(--size-6xl); }
.display-2 { font-size: var(--size-5xl); }

/* Headings — sans, restrained. h1 occasionally serif by choice. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--fg-primary);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  text-wrap: balance;
}
h1 { font-size: var(--size-4xl); font-weight: var(--weight-light); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--size-3xl); font-weight: var(--weight-light); }
h3 { font-size: var(--size-2xl); font-weight: var(--weight-medium); }
h4 { font-size: var(--size-xl);  font-weight: var(--weight-medium); }
h5 { font-size: var(--size-lg);  font-weight: var(--weight-semi); }
h6 { font-size: var(--size-md);  font-weight: var(--weight-semi); }

/* Editorial heading — serif variant when more warmth is needed */
.editorial { font-family: var(--font-serif); font-weight: var(--weight-light); letter-spacing: var(--tracking-tightest); }

/* Body */
p, .body {
  font-size: var(--size-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
  text-wrap: pretty;
}
.body-lg { font-size: var(--size-md); line-height: var(--leading-relaxed); }
.body-sm { font-size: var(--size-sm); line-height: var(--leading-normal); }
.lead    { font-size: var(--size-lg); line-height: var(--leading-relaxed); color: var(--fg-secondary); font-weight: var(--weight-regular); }

/* Eyebrow — wide-tracked uppercase, the brand's signature label */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  font-weight: var(--weight-light);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-quaternary);
}
.eyebrow-strong {
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-primary);
}

/* Caption / meta */
.caption {
  font-size: var(--size-xs);
  line-height: var(--leading-normal);
  color: var(--fg-tertiary);
}

/* Mono — used for technical content (CVE refs, controls, tooling) */
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: var(--weight-regular);
  letter-spacing: 0;
}
pre code { font-size: var(--size-sm); }

/* Links */
a {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid var(--border-default);
  transition: border-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}
a:hover { border-bottom-color: var(--gold-600); color: var(--navy-900); }

/* Selection — umber tint on bone */
::selection { background: var(--umber-200); color: var(--navy-900); }

/* ============================================================
   DARK MODE — accessible, never pure white-on-black
   ------------------------------------------------------------
   We use a softened bone foreground on a deep (but not black)
   navy background. Pure #FFF on #000 causes halation / migraine
   triggers for some readers; this pairing keeps contrast above
   WCAG AAA for body (15.7:1) without the harsh edge.
   ============================================================ */

:root {
  /* Dark-mode primitives — accessible by default */
  --dm-bg-canvas:    #16222F;          /* one step above navy-900, never #000 */
  --dm-bg-surface:   #1F2D3D;          /* raised */
  --dm-bg-sunken:    #11192280;
  --dm-fg-primary:   #E8E2D6;          /* warm bone, NOT #FFF */
  --dm-fg-secondary: #BFC8D2;
  --dm-fg-tertiary:  #8FA0B2;
  --dm-fg-quaternary:#6B7E92;
  --dm-fg-accent:    var(--umber-300); /* umber lifts on dark for legibility */
  --dm-border-subtle:  rgba(232, 226, 214, 0.08);
  --dm-border-default: rgba(232, 226, 214, 0.14);
  --dm-border-strong:  rgba(232, 226, 214, 0.28);
}

/* Auto-apply dark mode when user system pref OR an explicit class flips */
@media (prefers-color-scheme: dark) {
  :root:not(.force-light) {
    --bg-canvas:    var(--dm-bg-canvas);
    --bg-surface:   var(--dm-bg-surface);
    --bg-raised:    var(--dm-bg-surface);
    --bg-sunken:    var(--dm-bg-sunken);
    --bg-inverse:   var(--bone-100);
    --bg-accent:    rgba(138, 78, 42, 0.18);

    --fg-primary:   var(--dm-fg-primary);
    --fg-secondary: var(--dm-fg-secondary);
    --fg-tertiary:  var(--dm-fg-tertiary);
    --fg-quaternary:var(--dm-fg-quaternary);
    --fg-on-dark:   var(--dm-fg-primary);
    --fg-on-dark-2: var(--dm-fg-secondary);
    --fg-accent:    var(--dm-fg-accent);
    --fg-link:      var(--dm-fg-primary);

    --border-subtle:  var(--dm-border-subtle);
    --border-default: var(--dm-border-default);
    --border-strong:  var(--dm-border-strong);
  }
}

/* Manual override class — add `dark` to <html> or any container to opt in. */
.dark, [data-theme="dark"] {
  --bg-canvas:    var(--dm-bg-canvas);
  --bg-surface:   var(--dm-bg-surface);
  --bg-raised:    var(--dm-bg-surface);
  --bg-sunken:    var(--dm-bg-sunken);
  --bg-accent:    rgba(138, 78, 42, 0.18);

  --fg-primary:   var(--dm-fg-primary);
  --fg-secondary: var(--dm-fg-secondary);
  --fg-tertiary:  var(--dm-fg-tertiary);
  --fg-quaternary:var(--dm-fg-quaternary);
  --fg-on-dark:   var(--dm-fg-primary);
  --fg-on-dark-2: var(--dm-fg-secondary);
  --fg-accent:    var(--dm-fg-accent);
  --fg-link:      var(--dm-fg-primary);

  --border-subtle:  var(--dm-border-subtle);
  --border-default: var(--dm-border-default);
  --border-strong:  var(--dm-border-strong);

  background: var(--dm-bg-canvas);
  color: var(--dm-fg-secondary);
}

/* Selection in dark mode */
.dark ::selection, [data-theme="dark"] ::selection {
  background: var(--umber-700); color: var(--dm-fg-primary);
}