/* ============================================================
   Solven Advisory — Design Tokens
   Import this file before any other stylesheet.
   ============================================================ */

:root {
  /* ----- Colour: Primary ----- */
  --charcoal:    #2A2A28;
  --sage-deep:   #6B8068;
  --sage:        #8FA68A;
  --bone:        #F4F2EB;

  /* ----- Colour: Secondary ----- */
  --sage-pale:   #C8D4C2;
  --grey-mid:    #6B6B68;
  --grey-light:  #A8A8A4;
  --rule-grey:   #D8D6CF;

  /* ----- Colour: Dark mode background ----- */
  --charcoal-deep: #1F2420;

  /* ----- Semantic aliases (use these in components) ----- */
  --color-text:           var(--charcoal);
  --color-text-secondary: var(--grey-mid);
  --color-text-muted:     var(--grey-light);
  --color-bg:             var(--bone);
  --color-bg-dark:        var(--charcoal-deep);
  --color-bg-wash:        var(--sage-pale);
  --color-accent:         var(--sage-deep);
  --color-accent-light:   var(--sage);
  --color-rule:           var(--rule-grey);

  /* ----- Type: Families ----- */
  --font-serif: Georgia, "Times New Roman", serif;
  --font-sans:  Calibri, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ----- Type: Scale (rem-based, 1rem = 16px) -----
     Web sizes are larger than the print spec — necessary for screen legibility.
  */
  --text-xs:   0.75rem;   /* 12px — captions, metadata */
  --text-sm:   0.875rem;  /* 14px — small UI */
  --text-base: 1.0625rem; /* 17px — body copy minimum on screen */
  --text-md:   1.25rem;   /* 20px — lead paragraphs */
  --text-lg:   1.5rem;    /* 24px — H3 / subheadings */
  --text-xl:   2rem;      /* 32px — H2 */
  --text-2xl:  2.75rem;   /* 44px — H1 */
  --text-3xl:  4rem;      /* 64px — hero */

  /* ----- Type: Line heights ----- */
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* ----- Type: Tracking (letter-spacing) ----- */
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.20em;  /* H3 / section labels */
  --tracking-widest:  0.32em;  /* ADVISORY designator */

  /* ----- Spacing (rem-based) ----- */
  --space-xs:   0.25rem;  /* 4px */
  --space-sm:   0.5rem;   /* 8px */
  --space-md:   1rem;     /* 16px */
  --space-lg:   1.5rem;   /* 24px */
  --space-xl:   2.5rem;   /* 40px */
  --space-2xl:  4rem;     /* 64px */
  --space-3xl:  6rem;     /* 96px */
  --space-4xl:  9rem;     /* 144px — section breathing room */

  /* ----- Layout ----- */
  --container-narrow: 36rem;  /* 576px — long-form prose */
  --container-prose:  44rem;  /* 704px — articles, about */
  --container-wide:   64rem;  /* 1024px — hero, full layouts */

  /* ----- Borders & rules ----- */
  --rule-thin:  0.5px solid var(--rule-grey);
  --rule-sage:  0.5px solid var(--sage-deep);
  --radius-sm:  2px;
  --radius-md:  4px;
  /* No --radius-lg. Don't go above 4px. */

  /* ----- Breakpoints (for use in @media queries) -----
     Use these as comments, not custom properties — CSS doesn't allow
     custom properties in media queries.
     --break-sm: 480px
     --break-md: 768px
     --break-lg: 1024px
     --break-xl: 1280px
  */

  /* ----- Z-index scale ----- */
  --z-base:    1;
  --z-overlay: 10;
  --z-modal:   100;
  --z-toast:   1000;

  /* ----- Transitions -----
     Site is largely static. Transitions only on hover states.
  */
  --transition-fast: 120ms ease-out;
  --transition-slow: 320ms ease-out;
}

/* ============================================================
   Base reset (minimal — Astro and modern browsers handle most)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   Typographic primitives
   ============================================================ */

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400; /* never bold — see CLAUDE.md */
  color: var(--color-text);
  margin: 0 0 var(--space-md) 0;
  line-height: var(--leading-tight);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }

/* H3 is the exception — sans-serif tracked label, see brand spec */
h3 {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-accent);
}

p {
  margin: 0 0 var(--space-md) 0;
  max-width: 64ch; /* readable measure */
}

a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 0.2em;
  transition: color var(--transition-fast);
}

a:hover { color: var(--color-accent); }

/* The ADVISORY designator pattern — apply to any element with .designator */
.designator {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-accent);
}

/* Lead paragraph (italic Georgia, grey-mid) */
.lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
}

/* Caption (small, italic, light grey) */
.caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--color-text-muted);
}

/* Hairline rule */
hr {
  border: 0;
  border-top: var(--rule-thin);
  margin: var(--space-xl) 0;
}

/* Selection */
::selection {
  background-color: var(--color-accent);
  color: var(--color-bg);
}