/* ===========================================
   DESIGN TOKENS
   Drop your style guide PDF in style/guide/
   Drop font files (.woff2) in style/fonts/
   Update this file to match the brand guide.
=========================================== */

/* -- FONTS -- */

/* Geist — variable sans-serif, UI font (weight 100–900) */
@font-face {
  font-family: 'Geist';
  src: url('fonts/Geist/Geist-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Geist Mono — monospace, for IDs / codes */
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/Geist_Mono/GeistMono-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/*
  Instrument Serif — RESTRICTED USE ONLY
  Reserved for rare brand-voice moments: pull quotes, hero taglines,
  editorial one-liners where the italic serif adds intentional warmth.
  DO NOT use for: page titles, section headings, body copy, nav, UI labels,
  or anywhere legibility is the priority. Geist (--font-base) handles all
  headings and titles at any weight. When in doubt, use Geist.
*/
@font-face {
  font-family: 'Instrument Serif';
  src: url('fonts/Instrument_Serif/InstrumentSerif-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* -- COLOR TOKENS -- */
:root {
  /* Core palette */
  --color-black:       #121411;
  --color-white:       #ffffff;
  --color-blue-dark:   #3A57AA;   /* primary brand blue */
  --color-blue-light:  #A0B7EA;   /* secondary blue / gradient end */
  --color-olive:       #6A674A;   /* accent */
  --color-gray-light:  #f5f5f3;   /* backgrounds */
  --color-gray-border: #e0e0de;   /* borders */
  --color-muted:       #888888;   /* secondary text */

  /* Semantic aliases */
  --ht-black:  var(--color-black);
  --ht-white:  var(--color-white);
  --ht-green:  var(--color-blue-light);   /* compat alias — now light blue */
  --ht-blue:   var(--color-blue-dark);
  --ht-gray:   var(--color-gray-light);
  --ht-border: var(--color-gray-border);
  --ht-muted:  var(--color-muted);

  /* Nav gradient */
  --nav-gradient: linear-gradient(to bottom, var(--color-blue-dark), var(--color-blue-light));
  --nav-height:   200px;
  --nav-height-mobile: 80px;

  /* Status colors */
  --color-danger:        #a03030;
  --color-danger-bg:     #ffe8e8;
  --color-danger-border: #f0b0b0;
  --color-warn:          #d4a020;
  --color-warn-bg:       #fff8e6;
  --color-warn-border:   #f0d080;
  --color-info:          #1a4fa0;
  --color-info-bg:       #e6f0ff;
  --color-info-border:   #b0c8f0;
  --color-success:       #22a86e;
}

/* -- TYPOGRAPHY TOKENS -- */
:root {
  --font-base:    'Geist', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'Geist Mono', 'SF Mono', 'Fira Code', monospace;

  /*
    --font-serif (Instrument Serif) — USE SPARINGLY.
    Only for rare editorial moments: italic pull quotes, hero one-liners,
    CTA taglines where brand warmth is intentional. Never for headings,
    titles, or any UI where legibility matters. Default to --font-base.
  */
  --font-serif:   'Instrument Serif', Georgia, 'Times New Roman', serif;

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   16px;
  --text-xl:   19px;
  --text-2xl:  24px;
}

/* -- SPACING TOKENS -- */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
}

/* -- RADIUS TOKENS -- */
:root {
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 20px;
  --radius-full: 9999px;
}