/* Moacere design tokens — extends docs/brief/assets/tokens.css (brief colours kept verbatim).
   Light theme only. Every text/background pair used by components is listed with its WCAG ratio in
   scripts/check_contrast.py; run it after changing a colour. Author: Smarketer. */

:root {
  color-scheme: light;

  /* ---- Brand (brief) ---------------------------------------------------------------------- */
  --brand: #7222ff;            /* primary purple; white text on it = 6.2:1 */
  --brand-hover: #5e16d9;      /* brief */
  --brand-active: #4d10b8;
  --brand-ink: #5b14d6;        /* purple text on white/lavender (7.6:1) */
  --brand-50: #f8f4ff;         /* = lavender */
  --brand-100: #f1e9ff;
  --brand-200: #e2d2ff;
  --brand-300: #c6a6ff;
  --brand-400: #9d66ff;
  --accent: #17c717;           /* completion green — dark ink text only (9.0:1), never small white text */
  --accent-hover: #13b313;
  --accent-50: #ecfbec;
  --accent-100: #d3f5d3;
  --ink: #03022e;              /* body text */
  --heading: #1c1b43;          /* headings */
  --muted: #686782;            /* secondary text: 5.4:1 on white, 5.0:1 on lavender, 4.9:1 on canvas */
  --muted-strong: #4b4a68;
  --lavender: #f8f4ff;
  --surface: #ffffff;
  --border: #e7e1f0;           /* decorative dividers and card outlines (not a control boundary) */

  /* ---- Surfaces ---------------------------------------------------------------------------- */
  --canvas: #f6f5fa;           /* app work area (light grey) */
  --canvas-strong: #efedf5;    /* editor document backdrop */
  --surface-sunken: #faf9fc;   /* table head, code blocks */
  --surface-dark: #03022e;     /* closing CTA band, dark footer */
  --control-border: #8f8aa8;   /* input/checkbox boundaries: 3.3:1 on white (WCAG 1.4.11) */
  --control-border-hover: #6e6990;
  --divider: #eeeaf5;
  --overlay: rgba(3, 2, 46, 0.48);

  /* ---- Status tones (bg / ink / border / solid) — every ink ≥ 4.5:1 on its bg ------------- */
  --neutral-bg: #f0eef5;   --neutral-ink: #45445f;   --neutral-border: #dcd8e6;
  --brand-bg: #f1e9ff;     --brand-tone-ink: #5211c7; --brand-border: #d9c6ff;
  --info-bg: #eaf1ff;      --info-ink: #1d4bb0;      --info-border: #c9d9fb;
  --success-bg: #eafbea;   --success-ink: #176a29;   --success-border: #b9ebc0;   /* brief */
  --warning-bg: #fff3db;   --warning-ink: #835400;   --warning-border: #f6d99a;   /* brief */
  --danger: #b42318;                                                                /* brief */
  --danger-hover: #971c13;
  --danger-bg: #fef0ef;    --danger-ink: #9b1c13;    --danger-border: #f5c7c2;
  --slate-bg: #eef1f7;     --slate-ink: #3d4a66;     --slate-border: #d3dae8;

  /* ---- Recipient colours for the editor (soft, distinct; ink ≥ 4.5:1 on bg) --------------- */
  --r1-bg: #f1e9ff; --r1-border: #9d66ff; --r1-ink: #5211c7;
  --r2-bg: #ecfbec; --r2-border: #34c234; --r2-ink: #176a29;
  --r3-bg: #fff4e0; --r3-border: #f0a92e; --r3-ink: #7a4e00;
  --r4-bg: #eaf1ff; --r4-border: #5b8cf0; --r4-ink: #1d4bb0;
  --r5-bg: #ffedf5; --r5-border: #ec6fa6; --r5-ink: #9c1f5a;
  --r6-bg: #e6f8f6; --r6-border: #2fb3a3; --r6-ink: #0d665c;

  /* ---- Typography --------------------------------------------------------------------------- */
  --font: "FiraGO", "Noto Sans Georgian", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --fs-2xs: 0.75rem;     /* 12 */
  --fs-xs: 0.8125rem;    /* 13 */
  --fs-sm: 0.875rem;     /* 14 */
  --fs-body: 1rem;       /* 16 */
  --fs-app: 0.9375rem;   /* 15 — dense app body */
  --fs-md: 1.125rem;     /* 18 */
  --fs-lg: 1.25rem;      /* 20 */
  --fs-xl: 1.5rem;       /* 24 */
  --fs-2xl: 1.75rem;     /* 28 — app title (mobile) */
  --fs-3xl: 2rem;        /* 32 — app title (desktop) */
  --fs-4xl: 2.5rem;      /* 40 — section title */
  --fs-hero: clamp(2.125rem, 1.35rem + 3.3vw, 3.75rem); /* 34px → 60px */
  --fs-section: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem);
  --lh-tight: 1.2;
  --lh-heading: 1.3;
  --lh-body: 1.6;
  --lh-dense: 1.45;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  /* Never use text-transform: uppercase — it turns Mkhedruli into Mtavruli. */

  /* ---- Spacing (8px scale, with 4/12 half-steps) --------------------------------------------- */
  --space: 8px;                /* brief */
  --s-0-5: 4px;
  --s-1: 8px;
  --s-1-5: 12px;
  --s-2: 16px;
  --s-2-5: 20px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 48px;
  --s-7: 56px;
  --s-8: 64px;
  --s-10: 80px;
  --s-12: 96px;
  --s-15: 120px;

  /* ---- Radii --------------------------------------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-input: 12px;        /* brief: controls */
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-card: 24px;         /* brief */
  --radius-pill: 999px;

  /* ---- Elevation (restrained, ink-tinted) ------------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(28, 27, 67, 0.06);
  --shadow-sm: 0 1px 2px rgba(28, 27, 67, 0.04), 0 4px 12px -4px rgba(28, 27, 67, 0.08);
  --shadow-md: 0 2px 4px rgba(28, 27, 67, 0.04), 0 16px 32px -16px rgba(28, 27, 67, 0.18);
  --shadow-lg: 0 4px 8px rgba(28, 27, 67, 0.05), 0 32px 64px -24px rgba(28, 27, 67, 0.3);
  --shadow-brand: 0 10px 24px -10px rgba(114, 34, 255, 0.55);
  --shadow-inset: inset 0 1px 2px rgba(28, 27, 67, 0.06);

  /* ---- Focus --------------------------------------------------------------------------------- */
  --focus: #7222ff;
  --focus-on-dark: #c6a6ff;
  --focus-ring: 0 0 0 3px #fff, 0 0 0 5px var(--focus);

  /* ---- Layout -------------------------------------------------------------------------------- */
  --max-width: 1240px;         /* brief */
  --gutter: 24px;              /* brief; 16px under 640px (below) */
  --header-h: 76px;
  --topbar-h: 72px;
  --sidebar-w: 248px;
  --aside-w: 300px;
  --touch: 44px;               /* minimum touch target */
  --control-h: 48px;
  --control-h-sm: 40px;        /* visual height; hit area padded to 44px */

  /* ---- Z-index ------------------------------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 20;
  --z-header: 30;
  --z-drawer: 40;
  --z-dropdown: 50;
  --z-overlay: 60;
  --z-modal: 70;
  --z-toast: 80;
  --z-tooltip: 90;

  /* ---- Motion -------------------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;
  --dur-page: 560ms;

  /* legacy aliases from the brief tokens */
  --radius-control: var(--radius-input);
}

@media (max-width: 639.98px) {
  :root {
    --gutter: 16px;
    --header-h: 64px;
    --topbar-h: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur: 0.01ms;
    --dur-slow: 0.01ms;
    --dur-page: 0.01ms;
  }
}