/**
 * variables.css — Fluid Hand Painting
 *
 * Single source of truth for every design token.
 * Import this before style.css so all variables resolve correctly.
 *
 * Aesthetic: "Ink Studio" — refined dark, editorial calm.
 * Ink poured into deep water. Controls exist but don't compete.
 */

:root {

  /* ── Colour — Background ─────────────────────────────────────────────────── */
  --bg-void:        #05040a;   /* near-black, warm violet undertone            */
  --bg-deep:        #09070f;   /* slightly lighter layer                       */
  --bg-surface:     #120f1e;   /* panel/card backgrounds                       */
  --bg-raised:      #1c1830;   /* elevated elements, hover states              */

  /* ── Colour — Glass / Frosted ────────────────────────────────────────────── */
  --glass-fill:     rgba(12, 9, 20, 0.62);
  --glass-border:   rgba(255, 255, 255, 0.06);
  --glass-shine:    rgba(255, 255, 255, 0.025);

  /* ── Colour — Ink accents ────────────────────────────────────────────────── */
  --ink-violet:     #7c5cfc;   /* primary accent — electric indigo             */
  --ink-cyan:       #22d3ee;   /* secondary — cerulean                         */
  --ink-crimson:    #e83a6a;   /* record / danger                              */
  --ink-amber:      #f59e0b;   /* warning / processing                         */
  --ink-white:      #f0edf8;   /* near-white with violet tint                  */

  /* ── Colour — Text ───────────────────────────────────────────────────────── */
  --text-primary:   rgba(240, 237, 248, 0.92);
  --text-secondary: rgba(200, 192, 230, 0.55);
  --text-muted:     rgba(160, 150, 195, 0.35);
  --text-label:     rgba(200, 192, 230, 0.70);

  /* ── Colour — Palette button dots ────────────────────────────────────────── */
  --pal-ink:        #3a6fe0;
  --pal-neon:       #00ff99;
  --pal-fire:       #ff4400;
  --pal-ocean:      #00b4d8;
  --pal-sakura:     #ff6b9d;

  /* ── Colour — Status dot (record indicator) ──────────────────────────────── */
  --rec-red:        #ff2255;

  /* ── Typography ──────────────────────────────────────────────────────────── */
  /* Display: Cormorant Garant — editorial serif, zero generic energy          */
  /* Mono: "Azeret Mono" for numbers/status — tight, purposeful               */
  --font-display:   'Cormorant Garant', 'Georgia', serif;
  --font-ui:        'Azeret Mono', 'Fira Code', 'JetBrains Mono', monospace;

  --text-xs:        0.625rem;   /* 10px  */
  --text-sm:        0.75rem;    /* 12px  */
  --text-base:      0.875rem;   /* 14px  */
  --text-lg:        1rem;       /* 16px  */
  --text-xl:        1.25rem;    /* 20px  */
  --text-2xl:       1.75rem;    /* 28px  */

  --tracking-wide:  0.08em;
  --tracking-wider: 0.14em;

  /* ── Spacing ─────────────────────────────────────────────────────────────── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;

  /* ── Radius ──────────────────────────────────────────────────────────────── */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   28px;
  --r-pill: 9999px;

  /* ── Shadows ─────────────────────────────────────────────────────────────── */
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.45);
  --shadow-md:   0 4px 24px rgba(0,0,0,0.65);
  --shadow-lg:   0 8px 48px rgba(0,0,0,0.80);
  --shadow-glow: 0 0 20px rgba(124, 92, 252, 0.25);

  /* ── Transitions ─────────────────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-ink:   cubic-bezier(0.16, 1, 0.3, 1);

  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   400ms;
  --dur-xslow:  700ms;

  /* ── Layout ──────────────────────────────────────────────────────────────── */
  --toolbar-h:      52px;
  --toolbar-gap:    var(--sp-2);
  --webcam-size:    160px;
  --webcam-border:  2px;

  /* ── Z-index stack ───────────────────────────────────────────────────────── */
  --z-canvas:   0;
  --z-ui:       10;
  --z-webcam:   20;
  --z-status:   30;
  --z-loader:   100;

}

/* Dark-scheme media query is a no-op here (app is always dark)
   but keeps the intent explicit for future light-theme additions. */
@media (prefers-color-scheme: light) {
  :root {
    /* Keep dark — painting apps should never flip to white. */
  }
}