/* ==========================================================================
   Variables — Design Tokens
   Ōntóφys · The Mirror
   All design tokens as CSS custom properties.
   ========================================================================== */

:root {

  /* ── Palette ──────────────────────────────────────────────────────────── */
  --color-bg:              #f9f7f4;
  --color-bg-rgb:          249, 247, 244;
  --color-surface:         #ffffff;
  --color-text:            #121212;
  --color-text-rgb:        18, 18, 18;
  --color-muted:           #5a5a5a;
  --color-accent:          rgb(192, 154, 119);
  --color-accent-rgb:      192, 154, 119;
  --color-accent-hover:    rgb(172, 134, 99);
  --color-accent-hover-rgb:172, 134, 99;
  --color-error:           #c0392b;
  --color-error-light:     rgba(192, 57, 43, 0.08);
  --color-divider:         rgba(0, 0, 0, 0.06);
  --color-border:          rgba(0, 0, 0, 0.10);
  --color-border-focus:    rgba(192, 154, 119, 0.5);
  --color-selection-bg:    rgba(192, 154, 119, 0.18);
  --color-selection-text:  #121212;

  /* ── Typography ───────────────────────────────────────────────────────── */
  --font-heading:          'Cinzel', Georgia, 'Times New Roman', serif;
  --font-body:             'Nunito', 'Helvetica Neue', -apple-system,
                           BlinkMacSystemFont, sans-serif;

  --fw-light:              300;
  --fw-regular:            400;
  --fw-bold:               700;

  --lh-body:               1.6;
  --lh-heading:            1.25;

  --ls-heading:            0.04em;
  --ls-section:            0.1em;
  --ls-button:             0.04em;

  /* Fluid type scale */
  --fs-h1:                 clamp(26px, 2.8vw, 40px);
  --fs-h2:                 clamp(22px, 2.2vw, 32px);
  --fs-h3:                 clamp(18px, 1.8vw, 24px);
  --fs-lead:               clamp(16px, 1.7vw, 18px);
  --fs-body:               clamp(15px, 1.4vw, 16px);
  --fs-small:              clamp(12px, 1.1vw, 13px);
  --fs-label:              clamp(11px, 1vw, 12px);

  /* ── Spacing ──────────────────────────────────────────────────────────── */
  --space-xs:              4px;
  --space-sm:              8px;
  --space-md:              16px;
  --space-lg:              24px;
  --space-xl:              32px;
  --space-2xl:             48px;
  --space-3xl:             64px;
  --space-4xl:             96px;

  /* ── Radii ────────────────────────────────────────────────────────────── */
  --radius-sm:             8px;
  --radius-input:          12px;
  --radius-card:           16px;
  --radius-button:         16px;
  --radius-toggle:         20px;
  --radius-round:          50%;

  /* ── Shadows ──────────────────────────────────────────────────────────── */
  --shadow-card:           0 20px 60px rgba(0, 0, 0, 0.08);
  --shadow-card-hover:     0 16px 40px rgba(0, 0, 0, 0.12);
  --shadow-cta:            0 4px 12px rgba(192, 154, 119, 0.25);
  --shadow-cta-hover:      0 8px 24px rgba(192, 154, 119, 0.4);
  --shadow-input-focus:    0 0 0 3px rgba(192, 154, 119, 0.12);
  --shadow-subtle:         0 2px 8px rgba(0, 0, 0, 0.04);

  /* ── Transitions ──────────────────────────────────────────────────────── */
  --ease-default:          cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:              cubic-bezier(0, 0, 0.25, 1);
  --ease-spring:           cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:         150ms;
  --duration-normal:       300ms;
  --duration-slow:         400ms;
  --duration-view:         400ms;

  --transition-default:    var(--duration-slow) ease;
  --transition-fast:       var(--duration-fast) ease;

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --max-width-content:     680px;
  --padding-view-x:        20px;
  --padding-view-y:        40px;

  /* ── Z-index layers ───────────────────────────────────────────────────── */
  --z-base:                1;
  --z-overlay:             100;
  --z-lang-toggle:         200;
  --z-modal:               300;

  /* ── Progress bar ─────────────────────────────────────────────────────── */
  --progress-height:       3px;
  --progress-bg:           rgba(0, 0, 0, 0.06);
}