/* Researcher design tokens v0.1 (style guide, for approval)
   Single source: tokens.json. Plain CSS custom properties, no build step.
   Rule: components use SEMANTIC tokens (--bg, --text, --line ...), never primitives. */

:root {
  color-scheme: light;
  /* ---- primitives: colour ---- */
  --black: #121212;
  --white: #FFFFFF;
  --gray-50: #F6F6F4;
  --gray-200: #E4E4E1;
  --gray-400: #B9B9B5;
  --gray-500: #8C8C88;
  --gray-600: #6A6A66;
  --gray-700: #4A4A47;
  --khaki: #BA9765;       /* the Chaharsotoon sign colour, sampled from the vector file */
  --khaki-ink: #7C5F33;   /* khaki darkened for text and 1.5px strokes on white */
  --khaki-tint: #F3ECDF;
  --blue: #4636A0;        /* red-leaning blue, hue 249 */
  --blue-tint: #ECEAF7;

  /* ---- semantic colour (light) ---- */
  --bg: var(--white);
  --surface-sunk: var(--gray-50);
  --text: var(--black);
  --text-2: var(--gray-600);          /* 5.4:1 on white */
  --line: var(--gray-200);            /* decorative dividers only */
  --control-line: var(--gray-500);    /* 3.4:1, borders of interactive controls */
  --focus: var(--black);
  --accent: var(--khaki);             /* fills and marks, never text */
  --accent-text: var(--khaki-ink);    /* 5.9:1 on white */
  --accent-tint: var(--khaki-tint);
  --alert: var(--blue);               /* 9.5:1 on white; exceptional use only */
  --alert-tint: var(--blue-tint);
  --on-ink: var(--white);
  --on-accent: var(--black);          /* 6.9:1 on khaki */

  /* ---- typography ---- */
  --font-latin: "Geist", system-ui, sans-serif;
  --font-fa: "Estedad", "Geist", system-ui, sans-serif;
  --font-sans: "Geist", "Estedad", system-ui, sans-serif; /* Latin glyphs from Geist, Persian from Estedad */
  --font-mono: "Geist Mono", "Estedad", ui-monospace, monospace;

  --fs-display: 80px;  --lh-display: 0.98;  --ls-display: -0.035em;
  --fs-h1: 56px;       --lh-h1: 1.04;       --ls-h1: -0.03em;
  --fs-h2: 36px;       --lh-h2: 1.12;       --ls-h2: -0.02em;
  --fs-h3: 24px;       --lh-h3: 1.25;       --ls-h3: -0.01em;
  --fs-body-l: 20px;   --lh-body-l: 1.55;
  --fs-body: 17px;     --lh-body: 1.6;
  --fs-small: 14px;    --lh-small: 1.5;
  --fs-label: 12px;    --lh-label: 1.3;     --ls-label: 0.08em; /* Latin only; never letter-space Persian */
  --fs-data: 13px;     --lh-data: 1.4;
  --fa-size-boost: 1px;          /* Persian text is set 1px larger than Latin at the same step */
  --lh-fa-body: 1.9;
  --lh-fa-heading: 1.5;
  --fw-light: 300; --fw-regular: 400; --fw-strong: 600;

  /* ---- space (4px base) ---- */
  --s-0: 0;
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* ---- grid ---- */
  --grid-cols-sm: 4;  --grid-margin-sm: 16px; --grid-gutter-sm: 16px;   /* 390  */
  --grid-cols-md: 8;  --grid-margin-md: 32px; --grid-gutter-md: 20px;   /* 768  */
  --grid-cols-lg: 12; --grid-margin-lg: 48px; --grid-gutter-lg: 24px;   /* 1440 */
  --bp-md: 600px; --bp-lg: 1024px;
  --measure: 62ch;
  --measure-fa: 56ch;

  /* ---- shape ---- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;          /* controls */
  --r-round: 999px;    /* circles, dots, chips: the logo's own form */
  --bw-1: 1px;
  --bw-2: 2px;
  --target: 44px;      /* minimum touch target */

  /* ---- elevation: none. Layers are separated by line, not by shadow ---- */
  --layer-border: var(--bw-1) solid var(--text);

  /* ---- motion ---- */
  --dur-instant: 90ms;
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 480ms;
  --dur-stage: 800ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-register: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---- dark: OPT-IN ONLY via data-theme="dark". The product is light by default and never follows the system theme. ---- */
:root[data-theme="dark"] {
  --bg: #0F0F0F;
  --surface-sunk: #181818;
  --text: #F2F2EF;
  --text-2: #9A9A96;                 /* 6.8:1 on bg */
  --line: #2A2A28;
  --control-line: #7A7A76;
  --focus: #F2F2EF;
  --accent: var(--khaki);            /* 7.0:1 on bg */
  --accent-text: #CDB07E;            /* 9.2:1 on bg */
  --accent-tint: #26200F;
  --alert: #A99FF0;                  /* 8.0:1 on bg */
  --alert-tint: #1B1F3D;
  --on-ink: #0F0F0F;
  --on-accent: #0F0F0F;
  --layer-border: var(--bw-1) solid var(--text);
}

/* ---- responsive type steps ---- */
@media (max-width: 599px) {
  :root { --fs-display: 44px; --fs-h1: 36px; --fs-h2: 28px; --fs-h3: 21px; --fs-body-l: 18px; }
}

/* ---- Persian / RTL ---- */
:lang(fa), [dir="rtl"] {
  line-height: var(--lh-fa-body);
  letter-spacing: 0;          /* tracking breaks Persian letter joining */
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

/* ---- focus: state never by colour alone ---- */
:focus-visible { outline: var(--bw-2) solid var(--focus); outline-offset: 2px; }

/* ---- reduced motion: state changes remain, travel does not ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}