/* Alphagorithm design tokens. Import as is; no build step.
   Theme: light by default, dark from prefers-color-scheme, and data-theme="light|dark" on any element overrides both.
   Direction: fonts fall through per script, so the same variables work with dir="ltr" and dir="rtl".
   Colours marked "derived" are not in the identity study; the reason is in note.md. */

@font-face { font-family: "Outfit"; src: url("fonts/Outfit-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Kufam"; src: url("fonts/Kufam-Variable.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Noto Sans Arabic"; src: url("fonts/NotoSansArabic-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  /* palette: from the study */
  --brand-indigo: #0F172A;
  --brand-titanium: #878681;
  --brand-green: #00FF2A;
  --brand-teal: #12B5CB;
  --brand-white: #FFFFFF;
  /* palette: derived */
  --brand-green-ink: #008215;
  --brand-titanium-ink: #706F6B;
  --brand-titanium-light: #8D8D88;
  --brand-teal-ink: #0C7B8A;
  --brand-indigo-raised: #1B2538;
  --brand-mist: #F4F5F7;

  /* type */
  --font-display: "Outfit", "Kufam", system-ui, sans-serif;
  --font-text: "Inter", "Noto Sans Arabic", system-ui, sans-serif;
  --weight-light: 300;   /* Outfit and Inter; Kufam starts at 400 */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  /* type sizes: Fibonacci steps, except 16 (the root) and 26 (2 x 13) */
  --size-13: 0.8125rem;
  --size-16: 1rem;
  --size-21: 1.3125rem;
  --size-26: 1.625rem;
  --size-34: 2.125rem;
  --size-55: 3.4375rem;
  --size-89: 5.5625rem;
  --leading-tight: 1.15;
  --leading-text: 1.6;
  --leading-text-ar: 1.75;

  /* spacing: Fibonacci, in px at 16 px root */
  --space-2: 0.125rem;
  --space-3: 0.1875rem;
  --space-5: 0.3125rem;
  --space-8: 0.5rem;
  --space-13: 0.8125rem;
  --space-21: 1.3125rem;
  --space-34: 2.125rem;
  --space-55: 3.4375rem;
  --space-89: 5.5625rem;

  /* radii */
  --radius-0: 0;
  --radius-3: 0.1875rem;
  --radius-5: 0.3125rem;
  --radius-8: 0.5rem;

  /* motion: slow start, even acceleration, exact stop, no bounce */
  --ease-mass: cubic-bezier(0.45, 0, 0.15, 1);
  --time-short: 130ms;
  --time-mid: 210ms;
  --time-long: 340ms;

  color-scheme: light dark;
}

/* light theme (default) */
:root, [data-theme="light"] {
  --color-bg: var(--brand-white);
  --color-surface: var(--brand-mist);
  --color-text: var(--brand-indigo);
  --color-text-quiet: var(--brand-titanium-ink);
  --color-accent: var(--brand-green-ink);        /* text and icons on light: never Cyber Green */
  --color-accent-fill: var(--brand-indigo);
  --color-accent-on-fill: var(--brand-white);
  --color-info: var(--brand-teal-ink);
  --color-border: rgba(15, 23, 42, 0.12);        /* decorative divider */
  --color-control-border: var(--brand-titanium); /* 3.65:1 on white, interface parts */
  --color-focus: var(--brand-indigo);
  --logo-color: var(--brand-indigo);
}

/* dark theme: system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: var(--brand-indigo);
    --color-surface: var(--brand-indigo-raised);
    --color-text: var(--brand-white);
    --color-text-quiet: var(--brand-titanium-light);
    --color-accent: var(--brand-green);
    --color-accent-fill: var(--brand-green);
    --color-accent-on-fill: var(--brand-indigo);
    --color-info: var(--brand-teal);
    --color-border: rgba(255, 255, 255, 0.14);
    --color-control-border: var(--brand-titanium);
    --color-focus: var(--brand-green);
    --logo-color: var(--brand-green);
  }
}

/* dark theme: explicit */
[data-theme="dark"] {
  --color-bg: var(--brand-indigo);
  --color-surface: var(--brand-indigo-raised);
  --color-text: var(--brand-white);
  --color-text-quiet: var(--brand-titanium-light);
  --color-accent: var(--brand-green);
  --color-accent-fill: var(--brand-green);
  --color-accent-on-fill: var(--brand-indigo);
  --color-info: var(--brand-teal);
  --color-border: rgba(255, 255, 255, 0.14);
  --color-control-border: var(--brand-titanium);
  --color-focus: var(--brand-green);
  --logo-color: var(--brand-green);
}

@media (prefers-reduced-motion: reduce) {
  :root { --time-short: 0ms; --time-mid: 0ms; --time-long: 0ms; }
}