/* ============================================================
   ORIN ADVISORY — Design tokens
   Colors, typography, spacing, radii, shadows.
   ============================================================ */

/* ---------- Webfonts ----------
   ORIN's brand suggests Montserrat / Avenir Next / Inter.
   We use Montserrat (Google Fonts) for headings + UI and Inter
   for long-form body. Avenir Next is the licensed alternative
   if available locally — see fonts/README.md.
   ------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ====================================================
     COLOR — Brand palette (from brand sheet)
     ==================================================== */
  --orin-navy:        #0A1426;  /* primary brand color */
  --orin-gold:        #D4AF37;  /* accent — sparkle / dividers / ADVISORY */
  --orin-slate:       #415165;  /* secondary text / muted UI */
  --orin-fog:         #BFC4C9;  /* hairlines, disabled, subtle borders */
  --orin-bone:        #F4F4F4;  /* page background — warm off-white */

  /* Extended scale derived from the five core colors */
  --orin-navy-900:    #060C1A;
  --orin-navy-800:    #0A1426;
  --orin-navy-700:    #142036;
  --orin-navy-600:    #1E2D48;
  --orin-navy-500:    #2A3B59;
  --orin-navy-400:    #415165;
  --orin-navy-300:    #6A7587;
  --orin-navy-200:    #9DA4B0;
  --orin-navy-100:    #BFC4C9;
  --orin-navy-50:     #E6E8EB;

  --orin-gold-700:    #9C7E1F;
  --orin-gold-600:    #B8962B;
  --orin-gold-500:    #D4AF37;
  --orin-gold-400:    #DDBE59;
  --orin-gold-300:    #E6CD7C;
  --orin-gold-200:    #EFDC9F;
  --orin-gold-100:    #F7EDC9;
  --orin-gold-50:     #FBF6E4;

  /* Semantic surfaces */
  --bg-page:          var(--orin-bone);
  --bg-page-dark:     var(--orin-navy-800);
  --bg-surface:       #FFFFFF;
  --bg-surface-2:     #FAFAF8;       /* slightly warm card */
  --bg-elevated:      #FFFFFF;
  --bg-inverse:       var(--orin-navy-800);

  /* Foreground (text) */
  --fg-1:             var(--orin-navy-800);  /* primary text */
  --fg-2:             var(--orin-navy-400);  /* secondary text */
  --fg-3:             var(--orin-navy-300);  /* tertiary / captions */
  --fg-muted:         var(--orin-navy-200);  /* hints, placeholders */
  --fg-on-dark:       #F4F4F4;
  --fg-on-dark-2:     #BFC4C9;
  --fg-accent:        var(--orin-gold-500);

  /* Borders / dividers */
  --border-hairline:  rgba(10, 20, 38, 0.10);
  --border-default:   rgba(10, 20, 38, 0.16);
  --border-strong:    rgba(10, 20, 38, 0.32);
  --border-on-dark:   rgba(244, 244, 244, 0.14);
  --border-gold:      var(--orin-gold-500);

  /* Status (kept restrained — ORIN is not a status-light brand) */
  --color-success:    #2F7A57;
  --color-warning:    #B8862B;
  --color-danger:     #A33B2A;
  --color-info:       #335A8A;

  /* ====================================================
     TYPE — Families
     ==================================================== */
  --font-display:     'Montserrat', 'Avenir Next', 'Helvetica Neue', system-ui, sans-serif;
  --font-sans:        'Inter', 'Avenir Next', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:        'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — display sizes use Montserrat Light (300) wide-tracked */
  --text-3xs:    11px;
  --text-2xs:    12px;
  --text-xs:     13px;
  --text-sm:     14px;
  --text-base:   16px;
  --text-md:     18px;
  --text-lg:     20px;
  --text-xl:     24px;
  --text-2xl:    32px;
  --text-3xl:    44px;
  --text-4xl:    60px;
  --text-5xl:    80px;
  --text-6xl:    104px;

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

  /* Tracking — ORIN leans on generous letter-spacing for display */
  --tracking-xtight:  -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.18em;   /* "ADVISORY", section eyebrows */
  --tracking-widest:  0.32em;   /* hero wordmark */

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

  /* ====================================================
     SPACING — 4px base
     ==================================================== */
  --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;

  /* Container widths */
  --container-xs:  480px;
  --container-sm:  640px;
  --container-md:  840px;
  --container-lg:  1080px;
  --container-xl:  1240px;

  /* ====================================================
     RADII — ORIN is geometric and restrained
     ==================================================== */
  --radius-none:  0;
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    6px;
  --radius-lg:    10px;
  --radius-xl:    16px;
  --radius-pill:  999px;

  /* ====================================================
     SHADOWS — Soft, low-spread. Navy-tinted, not pure black.
     ==================================================== */
  --shadow-xs:  0 1px 2px rgba(10, 20, 38, 0.06);
  --shadow-sm:  0 2px 6px rgba(10, 20, 38, 0.06), 0 1px 2px rgba(10, 20, 38, 0.04);
  --shadow-md:  0 6px 18px rgba(10, 20, 38, 0.08), 0 2px 4px rgba(10, 20, 38, 0.04);
  --shadow-lg:  0 18px 40px rgba(10, 20, 38, 0.12), 0 4px 10px rgba(10, 20, 38, 0.05);
  --shadow-xl:  0 32px 72px rgba(10, 20, 38, 0.18), 0 8px 16px rgba(10, 20, 38, 0.06);
  --shadow-gold: 0 12px 32px rgba(212, 175, 55, 0.32);

  /* ====================================================
     MOTION
     ==================================================== */
  --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   140ms;
  --duration-base:   220ms;
  --duration-slow:   420ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply tokens to real tags so consumers can write plain HTML.
   ============================================================ */

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

/* Display — used for hero, section openers */
.h-display, .h-hero {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: clamp(48px, 8vw, var(--text-6xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-6);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-5);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}

/* Eyebrow — uppercase wide-tracked label, very ORIN */
.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-accent);
}

/* Wordmark style — extreme tracking, light weight, all caps */
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-1);
  text-wrap: pretty;
  margin: 0 0 var(--space-4);
}

.body-lg {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.body-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg-3);
  letter-spacing: 0.01em;
}

small {
  font-size: var(--text-xs);
  color: var(--fg-2);
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Hairline divider — short gold rule that recurs across the brand */
.rule-gold {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--orin-gold);
  border: 0;
}
.rule-hairline {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--border-hairline);
  border: 0;
}