/*
 * 00-variables.css — Design tokens
 * ─────────────────────────────────
 * All colours, fonts, spacing and radii live here.
 * Change anything once, it updates everywhere.
 */

 @font-face {
  font-family: 'blue_highway';
  src: url('/static/fonts/BlueHighwayRg.otf') format('opentype');
  font-weight: normal; /* Adjust if it's Bold, Light, etc. */
  font-style: normal;
  font-display: swap;  /* Shows fallback font while your local font loads */
}

:root {

  /* ── Colour palette ─────────────────────────────────────────────────────── */
  --color-bg:                      #F7F6F3;   /* warm off-white page background           */
  --color-bg-card:                 #FFFFFF;   /* card / sidebar backgrounds               */
  --color-bg-code:                  #1E2029;   /* code block background (dark)             */
  --color-bg-banner:              #17171a;   /* code block background (dark)             */
  --color-bg-subtle:              #F0EEE9;   /* very light warm grey for alternates      */

  --color-text:                   #191a1c;   /* primary text — warm near-black           */
  --color-text-banner:             #e2d6d1;   /* primary text — warm near-black           */
  --color-text-muted:             #6B6A65;   /* captions, dates, secondary info          */
  --color-text-faint:             #A8A7A2;   /* placeholder, disabled                    */
  --color-text-faint-banner:       #bec5c9;   /* placeholder, disabled                    */

  --color-accent:                 #367ddb;   /* terracotta — primary brand colour        */
  --color-accent-dark:            #2b299b;   /* accent hover state                       */
  --color-accent-light:           #73c1ee;   /* accent tint for badges                   */

  --color-border:                 #E0DED8;   /* default borders                          */
  --color-border-strong:          #C5C3BD;   /* heavier rule / hr                        */

  /* ── Typography ─────────────────────────────────────────────────────────── */
  --font-display: 'blue_highway', Georgia, serif;          /* headings              */
  --font-body:    'DM Sans', system-ui, sans-serif;    /* body text             */
  --font-mono:    'JetBrains Mono', 'Courier New', monospace; /* code          */

  /* ── Type scale (rem) ───────────────────────────────────────────────────── */
  --text-xs:   0.6875rem;   /*  11px */
  --text-sm:   0.8125rem;   /*  13px */
  --text-base: 1rem;        /*  16px */
  --text-md:   1.125rem;    /*  18px */
  --text-lg:   1.3125rem;   /*  21px */
  --text-xl:   1.625rem;    /*  26px */
  --text-2xl:  2.125rem;    /*  34px */
  --text-3xl:  2.875rem;    /*  46px */
  --text-4xl:  clamp(2.5rem, 5vw, 4.25rem); /* fluid hero */

  /* ── Spacing scale (rem) ────────────────────────────────────────────────── */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;

  /* ── Layout ─────────────────────────────────────────────────────────────── */
  --container-max:    1100px;
  --container-narrow:  720px;
  --nav-height:         60px;

  /* ── Borders ────────────────────────────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg: 14px;

  /* ── Transitions ────────────────────────────────────────────────────────── */
  --transition:       0.2s ease;
  --transition-slow:  0.35s ease;

  /* ── Shadows ────────────────────────────────────────────────────────────── */
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.07);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.08);
}