/* ============================================================================
   Aden — design tokens.
   Every colour, space, radius and type step in the site comes from here.
   No magic hex values anywhere else.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* -- palette (site prompt §4) ------------------------------------------ */
  --mist-hi:    #9eacb2;
  --mist:       #798c94;
  --slate:      #587483;
  --slate-lo:   #4a5a63;
  --ground:     #776f67;
  --ground-hi:  #97918a;
  --cream:      #fff0b5;
  --cream-edge: #d0ccad;
  --gold-text:  #e8dfae;
  --ink:        #2b3238;
  --paper:      #f4f6f7;
  --glass:      rgba(255, 255, 255, .14);
  --glass-edge: rgba(255, 255, 255, .35);

  /* rgb channels, for colour-mixing without a second hex literal */
  --cream-rgb:  255 240 181;
  --paper-rgb:  244 246 247;
  --ink-rgb:    43 50 56;

  /* -- veils -------------------------------------------------------------
     Aden is pale text on pale mist. A panel-wide gradient alone leaves copy
     near the top of a tall panel in the falloff, so every text bed carries a
     veil sized to its own column. (site prompt §9) */
  --veil-panel:  linear-gradient(180deg, rgba(22,29,35,.52) 0%, rgba(22,29,35,.20) 40%, rgba(22,29,35,.58) 100%);
  --veil-column: rgba(20, 27, 32, .74);
  --veil-tile:   rgba(20, 27, 32, .64);
  --veil-strong: rgba(16, 22, 27, .86);

  /* -- text on veils ------------------------------------------------------ */
  --text:        var(--paper);
  --text-dim:    #c3ced4;   /* 8.9:1 on --veil-column over the mist plates   */
  --text-faint:  #a8b6bd;   /* 6.3:1 — labels and meta only, never body copy */
  --text-gold:   var(--gold-text);
  --danger:      #ff9b8f;   /* warm red that still reads on mist            */
  --ok:          #a9dcb4;

  /* -- lines -------------------------------------------------------------- */
  --line:        rgba(255, 255, 255, .18);
  --line-soft:   rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .34);

  /* -- spacing ------------------------------------------------------------ */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;

  /* -- radii, shadow ------------------------------------------------------ */
  --r-sm: 2px;  --r-md: 3px;  --r-lg: 4px;
  --shadow-tile: 0 18px 44px rgba(10, 16, 20, .38);
  --shadow-pop:  0 26px 70px rgba(8, 13, 17, .55);
  --text-shadow: 0 1px 3px rgba(12, 18, 22, .75);

  /* -- type --------------------------------------------------------------- */
  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-body:    "EB Garamond", Georgia, "Times New Roman", serif;
  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --t-micro: .6875rem;   /* 11px UI micro-labels                            */
  --t-sm:    .8125rem;
  --t-base:  1rem;
  --t-md:    1.125rem;
  --t-lg:    1.375rem;
  --t-xl:    1.75rem;
  --t-2xl:   2.25rem;
  --t-3xl:   clamp(2rem, 1.2rem + 2.6vw, 3.25rem);

  --track-wide:  .18em;   /* the display tracking from the mockup            */
  --track-micro: .22em;

  /* -- chrome ------------------------------------------------------------- */
  --header-h: 84px;
  --page-max: 1240px;
  --z-header: 60;
  --z-drawer: 80;
  --z-dialog: 90;
  --z-toast:  100;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 899px) {
  :root { --header-h: 66px; }
}