/* =========================================================================
   Filippos Palace — Design tokens
   Three layers: primitives -> semantic -> component.
   Component CSS may reference SEMANTIC or COMPONENT tokens only, never a
   raw hex from layer 1.
   ========================================================================= */

/* ---------- LAYER 1 — PRIMITIVES (raw values, never used directly) ------- */
:root {
  /* Aubergine-black: the ballroom in shadow */
  --c-ink-950: #120A17;
  --c-ink-900: #1C1023;
  --c-ink-850: #241730;
  --c-ink-800: #2E1E3B;
  --c-ink-700: #3D2A4C;

  /* Marble + linen */
  --c-cream-50:  #F7F2E9;
  --c-cream-100: #EFE7D9;
  --c-cream-200: #E0D5C2;
  --c-cream-300: #C9BCA6;

  /* Chandelier brass */
  --c-gold-300: #E8CE8A;
  --c-gold-400: #D9B75F;
  --c-gold-500: #BE9740;
  --c-gold-700: #7E611F;   /* contrast-safe gold for text on cream (5.2:1) */

  /* The cove lights — used ONLY as light (glows, hairlines), never as
     flat background gradients. */
  --c-violet-500: #7B4FA8;
  --c-cyan-400:   #4FC3D9;

  /* Ink on cream grounds */
  --c-plum-900: #241528;
  --c-plum-600: #5A4463;

  --c-white: #FFFFFF;

  /* Type */
  --font-display: 'GFS Didot', Didot, 'Bodoni MT', 'Playfair Display', Georgia, serif;
  --font-body: 'Commissioner', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Spacing scale */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  /* Measure + rhythm */
  --measure: 62ch;
  --radius-sm: 2px;
  --radius-md: 4px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-mid: 320ms;
  --dur-slow: 700ms;

  --shell-max: 1360px;
  --shell-pad: clamp(1.25rem, 5vw, 5rem);
}

/* ---------- LAYER 2 — SEMANTIC -------------------------------------------
   Default ground is DARK. Any element (or section) carrying
   [data-ground="light"] re-declares the same names for a cream ground, so
   components never need to know which ground they are on.
   ------------------------------------------------------------------------ */
:root,
[data-ground="dark"] {
  --bg:          var(--c-ink-950);
  --bg-raised:   var(--c-ink-900);
  --surface:     var(--c-ink-850);
  --surface-alt: var(--c-ink-800);

  --ink:         var(--c-cream-50);
  --ink-muted:   var(--c-cream-300);
  --ink-faint:   #8C7F92;

  --accent:      var(--c-gold-400);
  --accent-soft: var(--c-gold-300);
  --accent-ink:  var(--c-ink-950);   /* text sitting ON the accent */

  --line:        rgba(217, 183, 95, 0.28);
  --line-soft:   rgba(247, 242, 233, 0.12);

  --glow-a:      var(--c-violet-500);
  --glow-b:      var(--c-cyan-400);

  --focus-ring:  var(--c-gold-300);

  --card-bg:     var(--surface);
  --card-line:   var(--line-soft);
  --panel-bg:    var(--c-ink-900);
  --panel-line:  rgba(217, 183, 95, 0.22);

  /* form feedback — must be legible on THIS ground */
  --danger:      #FFA294;
  --ok:          var(--c-gold-300);
  --input-bg:    var(--c-ink-950);
}

[data-ground="light"] {
  --bg:          var(--c-cream-50);
  --bg-raised:   var(--c-cream-100);
  --surface:     var(--c-white);
  --surface-alt: var(--c-cream-100);

  --ink:         var(--c-plum-900);
  --ink-muted:   var(--c-plum-600);
  /* was #7A6A85 = 4.45:1 on the cream ground, just under WCAG AA. Now that
     cream is the ground for the whole body rather than two sections, this
     applied to far more text, so it is darkened to ~5.2:1. */
  --ink-faint:   #6F5F7B;

  --accent:      var(--c-gold-700);
  --accent-soft: var(--c-gold-500);
  --accent-ink:  var(--c-cream-50);

  --line:        rgba(126, 97, 31, 0.32);
  --line-soft:   rgba(36, 21, 40, 0.14);

  --focus-ring:  var(--c-gold-700);

  --card-bg:     var(--surface);
  --card-line:   var(--line-soft);
  /* Purple appears on cream as a COMPONENT ground, never as a full section. */
  --panel-bg:    var(--c-ink-900);
  --panel-line:  rgba(217, 183, 95, 0.22);

  /* The salmon used on the dark ground is ~2:1 on cream — unreadable for the
     one message a user most needs to read. Dark red instead (~5.9:1). */
  --danger:      #B3261E;
  --ok:          var(--c-gold-700);
  --input-bg:    var(--bg);
}

/* ---------- LAYER 3 — COMPONENT ------------------------------------------ */
:root {
  --header-h: 76px;
  --header-h-sm: 64px;

  --btn-pad-y: 0.95rem;
  --btn-pad-x: 2rem;

  --rule-thickness: 1px;
  --rule-len: 84px;

  --card-pad: clamp(1.5rem, 3vw, 2.25rem);
  /* --card-bg / --card-line are NOT declared here on purpose. A custom
     property that references another one resolves at the element it is
     DECLARED on, not where it is used — declaring them here would freeze
     them to the dark ground and carry that value into light sections.
     They are declared inside each ground block below instead. */

  --tile-ratio: 3 / 2;

  --nav-panel-w: min(80vw, 340px);
}