/* ═══════════════════════════════════════════════════════════════════════════
   Athenor Academy — Design System · Tokens
   © 2026 Squareflow Agency Athens. All rights reserved.

   Source of truth: the Athenor Academy Figma design system
   (collections "Athenor / Primitives", "Athenor / Semantic", "Athenor / Motion").
   Change a value in Figma first, then mirror it here.

   Naming: every token is namespaced `--ath-*`.
     --ath-<primitive>         raw palette, spacing, radius… (do not use in components)
     --ath-color-<role>        semantic colour, switches with the theme
     --ath-font-* / --ath-text-*   typography
     --ath-duration-* / --ath-ease-* / --ath-distance-*   motion

   Themes: light is the default. Dark is opt-in with <html data-theme="dark">
   until every screen has moved to the semantic tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Primitives · colour ──────────────────────────────────────────────── */
  --ath-canvas: #faf9fe;
  --ath-white: #ffffff;
  --ath-ink: #242139;
  --ath-ink-muted: #615d70;
  --ath-lavender-050: #f7f4fe;
  --ath-lavender-100: #eee9fc;
  --ath-lavender-200: #ddd4f8;
  --ath-lavender-300: #b9a9ee;
  --ath-lavender-400: #8d76d8;
  --ath-lavender-500: #6550b9;
  --ath-lavender-700: #51417c;
  --ath-action-hover: #5943aa;
  --ath-action-pressed: #46348f;
  --ath-action-disabled: #c8c0e5;
  --ath-border: #d9d5e3;
  --ath-blue-100: #e8f0ff;
  --ath-blue-500: #245bc1;
  --ath-success-100: #e8f5ee;
  --ath-success-500: #2e7b5b;
  --ath-success-900: #17302a;
  --ath-warning-100: #fff4d8;
  --ath-warning-500: #9a6418;
  --ath-warning-900: #33270f;
  --ath-error-100: #fce9e9;
  --ath-error-500: #b33a3a;
  --ath-error-900: #3d1c20;
  --ath-info-100: #e8f0ff;
  --ath-info-500: #245bc1;
  --ath-info-900: #172447;
  --ath-dark-canvas: #181624;
  --ath-dark-surface: #242139;
  --ath-dark-elevated: #302c45;
  --ath-dark-border: #48425f;
  --ath-dark-text: #f7f4fe;
  --ath-dark-muted: #c7c1d4;
  --ath-dark-selected: #3b315f;

  /* ── Primitives · space, radius, size ─────────────────────────────────── */
  --ath-space-0: 0;
  --ath-space-1: 4px;
  --ath-space-2: 8px;
  --ath-space-3: 12px;
  --ath-space-4: 16px;
  --ath-space-5: 24px;
  --ath-space-6: 32px;
  --ath-space-7: 48px;
  --ath-space-8: 64px;
  --ath-space-9: 96px;

  --ath-radius-none: 0;
  --ath-radius-sm: 4px;
  --ath-radius-md: 8px;
  --ath-radius-lg: 12px;
  --ath-radius-xl: 16px;
  --ath-radius-full: 999px;

  /* Containers. Breakpoints (used in media queries, not as variables):
     tablet ≥ 768px · desktop ≥ 1200px. Reference widths 320 · 768 · 1440 · 1920. */
  --ath-container-sm: 640px;
  --ath-container-md: 960px;
  --ath-container-lg: 1200px;
  --ath-container-xl: 1312px;
  --ath-container-2xl: 1728px;

  --ath-icon-sm: 16px;
  --ath-icon-md: 20px;
  --ath-icon-lg: 24px;
  --ath-focus-ring-width: 2px;
  --ath-opacity-disabled: 0.4;
  --ath-opacity-overlay: 0.64;

  /* ── Typography ───────────────────────────────────────────────────────── */
  --ath-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;  /* editorial: display, headings */
  --ath-font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;  /* interface */
  --ath-font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Figma text styles: Athenor/Display, Athenor/Heading, Athenor/UI */
  --ath-text-display-xl: 48px;  --ath-leading-display-xl: 56px;
  --ath-text-display-l: 40px;   --ath-leading-display-l: 48px;
  --ath-text-heading-1: 32px;   --ath-leading-heading-1: 40px;
  --ath-text-heading-2: 24px;   --ath-leading-heading-2: 32px;
  --ath-text-title: 20px;       --ath-leading-title: 28px;
  --ath-text-body: 16px;        --ath-leading-body: 24px;
  --ath-text-small: 14px;       --ath-leading-small: 20px;
  --ath-text-label: 13px;       --ath-leading-label: 18px;
  --ath-text-caption: 12px;     --ath-leading-caption: 16px;
  --ath-weight-regular: 400;
  --ath-weight-semibold: 600;
  --ath-weight-bold: 700;

  /* ── Motion (Athenor / Motion · Full) ─────────────────────────────────── */
  --ath-duration-fast: 120ms;
  --ath-duration-standard: 200ms;
  --ath-duration-slow: 320ms;
  --ath-duration-reveal: 480ms;
  --ath-distance-xs: 4px;
  --ath-distance-sm: 8px;
  --ath-distance-md: 16px;
  --ath-stagger-step: 60ms;
  --ath-stagger-max: 240ms;
  --ath-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ath-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ath-ease-move: cubic-bezier(0.65, 0, 0.35, 1);

  /* ── Semantic colour · Light ──────────────────────────────────────────── */
  --ath-color-canvas: var(--ath-canvas);
  --ath-color-surface: var(--ath-white);
  --ath-color-elevated: var(--ath-white);
  --ath-color-subtle: var(--ath-lavender-050);
  --ath-color-selected: var(--ath-lavender-100);
  --ath-color-inverse: var(--ath-ink);
  --ath-color-text: var(--ath-ink);
  --ath-color-text-secondary: var(--ath-ink-muted);
  --ath-color-text-on-action: var(--ath-white);
  --ath-color-text-on-inverse: var(--ath-canvas);
  --ath-color-border: var(--ath-border);
  --ath-color-border-strong: var(--ath-ink-muted);
  --ath-color-action: var(--ath-lavender-500);
  --ath-color-action-hover: var(--ath-action-hover);
  --ath-color-action-pressed: var(--ath-action-pressed);
  --ath-color-action-disabled: var(--ath-action-disabled);
  --ath-color-recognition: var(--ath-lavender-700);
  --ath-color-focus: var(--ath-blue-500);
  --ath-color-success: var(--ath-success-500);
  --ath-color-success-surface: var(--ath-success-100);
  --ath-color-warning: var(--ath-warning-500);
  --ath-color-warning-surface: var(--ath-warning-100);
  --ath-color-error: var(--ath-error-500);
  --ath-color-error-surface: var(--ath-error-100);
  --ath-color-info: var(--ath-info-500);
  --ath-color-info-surface: var(--ath-info-100);
  --ath-color-scrim: rgb(36 33 57 / var(--ath-opacity-overlay));

  /* Elevation (Figma effect style "Athenor/Elevation/Card") */
  --ath-shadow-hairline: 0 0 0 1px var(--ath-color-border);
  --ath-shadow-card: 0 4px 16px rgb(36 33 56 / 0.12);
  --ath-shadow-overlay: 0 16px 48px rgb(36 33 56 / 0.18);
}

/* ── Semantic colour · Dark ─────────────────────────────────────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ath-color-canvas: var(--ath-dark-canvas);
  --ath-color-surface: var(--ath-dark-surface);
  --ath-color-elevated: var(--ath-dark-elevated);
  --ath-color-subtle: var(--ath-dark-elevated);
  --ath-color-selected: var(--ath-dark-selected);
  --ath-color-inverse: var(--ath-canvas);
  --ath-color-text: var(--ath-dark-text);
  --ath-color-text-secondary: var(--ath-dark-muted);
  --ath-color-text-on-action: var(--ath-ink);
  --ath-color-text-on-inverse: var(--ath-ink);
  --ath-color-border: var(--ath-dark-border);
  --ath-color-border-strong: var(--ath-dark-muted);
  --ath-color-action: var(--ath-lavender-300);
  --ath-color-action-hover: var(--ath-lavender-200);
  --ath-color-action-pressed: var(--ath-lavender-100);
  --ath-color-action-disabled: var(--ath-dark-border);
  --ath-color-recognition: var(--ath-lavender-100);
  --ath-color-focus: var(--ath-blue-100);
  --ath-color-success: var(--ath-success-100);
  --ath-color-success-surface: var(--ath-success-900);
  --ath-color-warning: var(--ath-warning-100);
  --ath-color-warning-surface: var(--ath-warning-900);
  --ath-color-error: var(--ath-error-100);
  --ath-color-error-surface: var(--ath-error-900);
  --ath-color-info: var(--ath-info-100);
  --ath-color-info-surface: var(--ath-info-900);
  --ath-shadow-card: 0 4px 16px rgb(0 0 0 / 0.4);
  --ath-shadow-overlay: 0 16px 48px rgb(0 0 0 / 0.55);
}

/* ── Motion · Reduced (Athenor / Motion · Reduced) ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ath-duration-slow: 200ms;
    --ath-duration-reveal: 200ms;
    --ath-distance-xs: 0px;
    --ath-distance-sm: 0px;
    --ath-distance-md: 0px;
    --ath-stagger-step: 0ms;
    --ath-stagger-max: 0ms;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Legacy bridge — TEMPORARY.
   The existing screens still read the earlier variable names. They are pointed
   at the Athenor tokens here so the whole application takes the new palette and
   type without touching any markup or script. Each alias is removed once no
   screen uses it any more; new code must use the `--ath-*` tokens only.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --color-bg: var(--ath-color-canvas);
  --color-surface: var(--ath-color-surface);
  --color-text: var(--ath-color-text);
  --color-accent: var(--ath-color-action);
  --color-accent-2: var(--ath-color-action);
  --color-divider: var(--ath-color-border);

  --color-accent-100: var(--ath-lavender-050);
  --color-accent-200: var(--ath-lavender-100);
  --color-accent-300: var(--ath-lavender-200);
  --color-accent-400: var(--ath-lavender-300);
  --color-accent-500: var(--ath-lavender-400);
  --color-accent-600: var(--ath-color-action-hover);
  --color-accent-700: var(--ath-lavender-700);
  --color-accent-800: var(--ath-action-pressed);
  --color-accent-900: var(--ath-ink);
  --color-accent-2-100: var(--ath-lavender-050);
  --color-accent-2-200: var(--ath-lavender-100);
  --color-accent-2-300: var(--ath-lavender-200);
  --color-accent-2-400: var(--ath-lavender-300);
  --color-accent-2-500: var(--ath-lavender-400);
  --color-accent-2-600: var(--ath-color-action-hover);
  --color-accent-2-700: var(--ath-lavender-700);
  --color-accent-2-800: var(--ath-action-pressed);
  --color-accent-2-900: var(--ath-ink);

  --font-heading: var(--ath-font-serif);
  --font-heading-weight: var(--ath-weight-regular);
  --font-body: var(--ath-font-sans);

  --radius-sm: var(--ath-radius-sm);
  --radius-md: var(--ath-radius-md);
  --radius-lg: var(--ath-radius-lg);

  --shadow-sm: var(--ath-shadow-hairline);
  --shadow-md: var(--ath-shadow-hairline), var(--ath-shadow-card);
  --shadow-lg: var(--ath-shadow-hairline), var(--ath-shadow-overlay);

  --athenor-muted: var(--ath-color-text-secondary);
  --athenor-ink-2: var(--ath-color-text);
  --athenor-surface-2: var(--ath-color-subtle);
  --athenor-dark: var(--ath-ink);
  --athenor-tint: var(--ath-color-subtle);
  --athenor-tint-2: var(--ath-color-selected);
  --athenor-success: var(--ath-color-success);
  --athenor-success-soft: var(--ath-color-success-surface);
  --athenor-success-text: var(--ath-color-success);
  --athenor-warn: var(--ath-color-warning);
  --athenor-warn-soft: var(--ath-color-warning-surface);
}