/* ==========================================================================
   Firoozeh design system · tokens
   One source of truth for colour, type, space, shape, depth and motion.
   Light is the default; dark is applied by [data-theme="dark"] on <html>
   or, when the user chose "system", by prefers-color-scheme.
   Every colour pair below was checked for WCAG AA (4.5:1 text, 3:1 UI).
   ========================================================================== */

@font-face { font-family: "Firoozeh Kufi"; src: url("/static/app/fonts/kufi-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Firoozeh Kufi"; src: url("/static/app/fonts/kufi-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("/static/app/fonts/vazirmatn-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* ---- raw tile palette (never use directly in components) ---- */
  --tile-firoozeh: #007d82;   /* turquoise glaze: the lead */
  --tile-lajvard: #004042;    /* deep glaze */
  --tile-anar: #950404;       /* pomegranate */
  --tile-khormalu: #e04b28;   /* persimmon */
  --tile-khesht: #c38961;     /* fired brick */
  --tile-pesteh: #388f30;     /* pistachio */
  --tile-sarv: #0f542f;       /* cypress */

  /* ---- semantic colour (light) ---- */
  --k-bg: #f4f7f6;
  --k-surface: #fcfdfd;
  --k-surface-2: #ecf2f1;
  --k-surface-3: #e1eae9;
  --k-overlay: rgb(9 30 31 / 0.48);
  --k-line: #d5e0df;
  --k-line-strong: #a9bcbb;
  --k-ink: #132729;
  --k-ink-2: #34494b;
  --k-muted: #566c6e;
  --k-faint: #7f9496;
  --k-accent: #007d82;
  --k-accent-hover: #006a6e;
  --k-accent-ink: #005558;
  --k-accent-soft: #dcefee;
  --k-on-accent: #ffffff;
  --k-deep: #004042;
  --k-on-deep: #e6f3f2;
  --k-rail-bg: #004042;
  --k-rail-line: transparent;
  --k-on-danger: #ffffff;
  --k-on-warm: #ffffff;
  --k-warm: #c23d1e;          /* persimmon, darkened for text contrast */
  --k-warm-soft: #fbe6df;
  --k-clay: #8a5a36;
  --k-clay-soft: #f4ebe3;
  --k-ok: #2c7a26;
  --k-ok-soft: #e2f0df;
  --k-warn: #8f5200;
  --k-warn-soft: #faefd9;
  --k-danger: #950404;
  --k-danger-soft: #f8e1df;
  --k-info: #1f5f86;
  --k-info-soft: #e0edf5;
  --k-focus: #007d82;
  --k-selection: #bfe3e1;
  /* map base layer (KMap) */
  --k-map-bg: #e4eeec; --k-map-line: #cddcda; --k-map-line-strong: #a4bdba; --k-map-ink: #3b5254; --k-map-halo: #eef4f3; --k-map-active: #004042;

  /* data-viz series: the kashi stripes, in order */
  --k-series-1: #007d82;
  --k-series-2: #e04b28;
  --k-series-3: #c38961;
  --k-series-4: #388f30;
  --k-series-5: #004042;
  --k-series-6: #950404;

  /* ---- type ---- */
  --k-font-display: "Firoozeh Kufi", "Noto Kufi Arabic", "Vazirmatn", system-ui, sans-serif;
  --k-font-body: "Vazirmatn", "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --k-font-mono: ui-monospace, "SFMono-Regular", "DejaVu Sans Mono", monospace;
  --k-text-xs: 0.8125rem;   /* 13 · only for meta in dense tables */
  --k-text-sm: 0.875rem;    /* 14 · interface */
  --k-text-md: 1rem;        /* 16 · reading */
  --k-text-lg: 1.125rem;    /* 18 */
  --k-text-xl: 1.375rem;    /* 22 */
  --k-text-2xl: 1.75rem;    /* 28 */
  --k-text-3xl: 2.25rem;    /* 36 */
  --k-text-4xl: 3rem;       /* 48 */
  --k-text-5xl: clamp(2.75rem, 6vw, 4.5rem); /* statement */
  --k-leading-tight: 1.35;
  --k-leading-ui: 1.6;
  --k-leading-body: 1.9;    /* Persian script needs room above and below */

  /* ---- space (4px base, 8px module) ---- */
  --k-1: 0.25rem;  --k-2: 0.5rem;  --k-3: 0.75rem; --k-4: 1rem;
  --k-5: 1.5rem;   --k-6: 2rem;    --k-7: 3rem;    --k-8: 4rem; --k-9: 6rem;

  /* density: components read these, [data-density] rewrites them */
  --k-control-h: 2.5rem;
  --k-control-h-sm: 2rem;
  --k-row-pad: 0.75rem;

  /* ---- shape: tile geometry, mostly square ---- */
  --k-radius-xs: 2px;
  --k-radius-sm: 4px;
  --k-radius-md: 8px;
  --k-radius-lg: 14px;
  --k-radius-pill: 999px;

  /* ---- elevation ---- */
  --k-shadow-1: 0 1px 0 rgb(19 39 41 / 0.06), 0 1px 2px rgb(19 39 41 / 0.06);
  --k-shadow-2: 0 2px 4px rgb(19 39 41 / 0.06), 0 8px 20px -6px rgb(19 39 41 / 0.14);
  --k-shadow-3: 0 12px 32px -8px rgb(9 30 31 / 0.28), 0 2px 6px rgb(9 30 31 / 0.08);
  --k-ring: 0 0 0 3px color-mix(in srgb, var(--k-focus) 35%, transparent);

  /* ---- motion ---- */
  --k-ease: cubic-bezier(.2, .7, .2, 1);
  --k-ease-out: cubic-bezier(.16, 1, .3, 1);
  --k-dur-1: 120ms;
  --k-dur-2: 200ms;
  --k-dur-3: 320ms;

  /* ---- layers ---- */
  --k-z-sticky: 20;
  --k-z-nav: 40;
  --k-z-drawer: 60;
  --k-z-modal: 70;
  --k-z-popover: 80;
  --k-z-toast: 90;

  /* ---- layout ---- */
  --k-rail-w: 15.5rem;
  --k-topbar-h: 3.75rem;
  --k-tabbar-h: 3.75rem;
  --k-content-max: 80rem;

  color-scheme: light;
}

/* ---- dark ---- */
:root[data-theme="dark"] {
  --k-bg: #0d1819;
  --k-surface: #122122;
  --k-surface-2: #182b2c;
  --k-surface-3: #203738;
  --k-overlay: rgb(2 10 11 / 0.66);
  --k-line: #253b3d;
  --k-line-strong: #3d5a5c;
  --k-ink: #e4eeed;
  --k-ink-2: #c3d3d2;
  --k-muted: #98afb0;
  --k-faint: #6f8a8b;
  --k-accent: #35b6ba;
  --k-accent-hover: #4fc6ca;
  --k-accent-ink: #7fd8db;
  --k-accent-soft: #10393b;
  --k-on-accent: #04201f;
  --k-deep: #061f20;
  --k-on-deep: #d2e9e8;
  --k-rail-bg: #081314;
  --k-rail-line: #253b3d;
  --k-on-danger: #2a0705;
  --k-on-warm: #2a0d05;
  --k-warm: #ff8a66;
  --k-warm-soft: #3a1c13;
  --k-clay: #ddb08c;
  --k-clay-soft: #33261c;
  --k-ok: #79c96e;
  --k-ok-soft: #16301a;
  --k-warn: #f0b45a;
  --k-warn-soft: #33260f;
  --k-danger: #ff8c80;
  --k-danger-soft: #3b1514;
  --k-info: #7cbfe6;
  --k-info-soft: #112b3b;
  --k-focus: #4fc6ca;
  --k-selection: #1d5658;
  --k-map-bg: #0f2324; --k-map-line: #1d3637; --k-map-line-strong: #2f5052; --k-map-ink: #a8c4c4; --k-map-halo: #0f2324; --k-map-active: #f0b45a;
  --k-series-1: #35b6ba;
  --k-series-2: #ff8a66;
  --k-series-3: #ddb08c;
  --k-series-4: #79c96e;
  --k-series-5: #7cbfe6;
  --k-series-6: #ff8c80;
  --k-shadow-1: 0 1px 0 rgb(0 0 0 / 0.3);
  --k-shadow-2: 0 2px 4px rgb(0 0 0 / 0.3), 0 8px 24px -6px rgb(0 0 0 / 0.5);
  --k-shadow-3: 0 16px 40px -8px rgb(0 0 0 / 0.65);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --k-bg: #0d1819; --k-surface: #122122; --k-surface-2: #182b2c; --k-surface-3: #203738;
    --k-overlay: rgb(2 10 11 / 0.66); --k-line: #253b3d; --k-line-strong: #3d5a5c;
    --k-ink: #e4eeed; --k-ink-2: #c3d3d2; --k-muted: #98afb0; --k-faint: #6f8a8b;
    --k-accent: #35b6ba; --k-accent-hover: #4fc6ca; --k-accent-ink: #7fd8db; --k-accent-soft: #10393b;
    --k-on-accent: #04201f; --k-deep: #061f20; --k-on-deep: #d2e9e8;
    --k-rail-bg: #081314; --k-rail-line: #253b3d; --k-on-danger: #2a0705; --k-on-warm: #2a0d05;
    --k-warm: #ff8a66; --k-warm-soft: #3a1c13; --k-clay: #ddb08c; --k-clay-soft: #33261c;
    --k-ok: #79c96e; --k-ok-soft: #16301a; --k-warn: #f0b45a; --k-warn-soft: #33260f;
    --k-danger: #ff8c80; --k-danger-soft: #3b1514; --k-info: #7cbfe6; --k-info-soft: #112b3b;
    --k-focus: #4fc6ca; --k-selection: #1d5658;
    --k-map-bg: #0f2324; --k-map-line: #1d3637; --k-map-line-strong: #2f5052; --k-map-ink: #a8c4c4; --k-map-halo: #0f2324; --k-map-active: #f0b45a;
    --k-series-1: #35b6ba; --k-series-2: #ff8a66; --k-series-3: #ddb08c; --k-series-4: #79c96e; --k-series-5: #7cbfe6; --k-series-6: #ff8c80;
    --k-shadow-1: 0 1px 0 rgb(0 0 0 / 0.3);
    --k-shadow-2: 0 2px 4px rgb(0 0 0 / 0.3), 0 8px 24px -6px rgb(0 0 0 / 0.5);
    --k-shadow-3: 0 16px 40px -8px rgb(0 0 0 / 0.65);
    color-scheme: dark;
  }
}

:root[data-density="compact"] { --k-control-h: 2.125rem; --k-control-h-sm: 1.75rem; --k-row-pad: 0.5rem; }
:root[data-density="comfy"] { --k-control-h: 2.75rem; --k-control-h-sm: 2.25rem; --k-row-pad: 1rem; }

@media (prefers-reduced-motion: reduce) {
  :root { --k-dur-1: 0ms; --k-dur-2: 0ms; --k-dur-3: 0ms; }
}