/* Bento — design tokens (Tastefolio). Modular modern: a calm grey canvas, white tiles with large radii on a strict
   tile grid, one raspberry accent, condensed numerals for stats and nothing else competing for attention. */
:root {
  --canvas: #eeeef0;          /* the grey between tiles is part of the design */
  --surface: #ffffff;         /* tiles */
  --surface-2: #f5f5f7;       /* inner wells: inputs, tracks, soft tiles */
  --surface-3: #e6e6ea;
  --surface-ink: #121214;     /* the one dark tile per group */
  --overlay: rgba(18, 18, 20, .42);

  --ink: #121214;
  --ink-2: #56565e;
  --ink-3: #85858e;
  --ink-inverse: #ffffff;

  --line: #e4e4e8;
  --line-2: #cfcfd6;

  --brand: #df1c71;           /* raspberry — one accent tile, primary actions, active markers */
  --brand-ink: #ffffff;
  --brand-soft: color-mix(in oklab, var(--brand) 12%, #ffffff);
  --brand-strong: color-mix(in oklab, var(--brand) 82%, #000);
  --focus: color-mix(in oklab, var(--brand) 55%, transparent);

  --success: #1f9d55;
  --success-soft: #e3f4ea;
  --warning: #b9740f;
  --warning-soft: #fbf0dc;
  --danger: #d33a2c;
  --danger-soft: #fbe6e3;
  --info: #2f6fd6;
  --info-soft: #e4edfb;

  --chart-1: var(--ink);
  --chart-2: var(--brand);
  --chart-3: #9a9aa3;
  --chart-4: #2f6fd6;
  --chart-5: #1f9d55;
  --chart-6: #e2a33a;
  --chart-grid: #ececf0;
  --chart-axis: var(--ink-3);
  --chart-curve: smooth;
  --chart-stroke: 2.5;
  --chart-area: .1;
  --chart-radius: 8;
  --chart-bar-gap: .38;
  --chart-donut: 16;
  --chart-gap: 4;
  --chart-dots: 0;

  --font-sans: "Instrument Sans", "Vazirmatn", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Instrument Sans", "Vazirmatn", system-ui, sans-serif;   /* condensed width (wdth 75) for numerals */
  --font-mono: ui-monospace, "SF Mono", Menlo, "Vazirmatn", monospace;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 19px;
  --fs-xl: 24px;
  --fs-2xl: 34px;
  --fs-3xl: 48px;
  --fs-display: clamp(46px, 6.6vw, 104px);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 600;
  --fw-display: 600;
  --lh-tight: .98;
  --lh-snug: 1.2;
  --lh-body: 1.55;
  --tracking-display: -.035em;
  --tracking-caps: .06em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;          /* every tile */
  --radius-pill: 999px;
  --border-w: 1px;
  --shadow-1: 0 1px 2px rgba(18, 18, 20, .05);
  --shadow-2: 0 14px 34px -14px rgba(18, 18, 20, .22);
  --shadow-3: 0 32px 80px -24px rgba(18, 18, 20, .4);

  --container: 1240px;
  --gutter: clamp(14px, 3vw, 32px);
  --gap: clamp(10px, 1.1vw, 16px);   /* the one gap between all tiles */
  --row: 132px;                       /* the tile row unit */
  --control-h: 44px;
  --control-h-lg: 52px;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-1: 160ms;
  --dur-2: 300ms;
  --dur-3: 520ms;
  color-scheme: light;
}

[data-theme="dark"] {
  --canvas: #0b0b0d;
  --surface: #17171a;
  --surface-2: #1f1f23;
  --surface-3: #2a2a2f;
  --surface-ink: #f4f4f6;     /* the "ink" tile inverts to light on dark */
  --overlay: rgba(0, 0, 0, .6);
  --ink: #f4f4f6;
  --ink-2: #a9a9b2;
  --ink-3: #75757e;
  --ink-inverse: #121214;
  --line: #26262b;
  --line-2: #36363d;
  --brand: #ff4f96;
  --brand-ink: #1a040e;
  --brand-soft: color-mix(in oklab, var(--brand) 16%, #17171a);
  --success: #4cc07e;
  --success-soft: rgba(76, 192, 126, .14);
  --warning: #f0b45b;
  --warning-soft: rgba(240, 180, 91, .14);
  --danger: #ff7364;
  --danger-soft: rgba(255, 115, 100, .14);
  --info: #6aa3ff;
  --info-soft: rgba(106, 163, 255, .14);
  --chart-grid: #222227;
  --shadow-2: 0 14px 34px -14px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

:root:lang(fa) {
  --font-sans: "Vazirmatn", "Instrument Sans", Tahoma, sans-serif;
  --font-display: "Vazirmatn", "Instrument Sans", sans-serif;
  --fs-md: 15.5px;
  --fs-display: clamp(38px, 5.4vw, 84px);
  --fw-display: 700;
  --lh-tight: 1.3;
  --lh-snug: 1.5;
  --lh-body: 1.9;
  --tracking-display: 0;
  --tracking-caps: 0;
}