/* =========================================================================
   Design tokens — خانه تابلو سازان
   Reference palette: Jeddy blue/slate, with explicit light and dark modes.
   ========================================================================= */

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn-arabic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Estedad";
  src: url("../fonts/estedad-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --atelier-bg: var(--color-bg);
  --atelier-panel: var(--color-surface);
  --atelier-line: var(--color-border);
  --atelier-ink: var(--color-ink);
  --atelier-muted: var(--color-muted);
  --atelier-accent: var(--color-accent);
  --atelier-accent-ink: var(--color-action-ink);

  --font-sans: "Vazirmatn", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Estedad", "Vazirmatn", system-ui, sans-serif;
  --font-mono: "Vazirmatn", ui-monospace, "SF Mono", Menlo, monospace;

  --text-2xs: 0.75rem;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.35rem + 2vw, 2.75rem);
  --text-display: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.7;
  --leading-relaxed: 1.85;

  --tracking-tighter: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-wide: 0.04em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 7rem;

  --radius-xs: 0.5rem;
  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;

  --container: 78rem;
  --container-narrow: 42rem;
  --measure: 68ch;
  --header-h: 5.5rem;
  --gutter: clamp(1rem, 3.2vw, 3rem);

  --ease-out: cubic-bezier(0.22, 0.8, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 140ms;
  --dur-2: 220ms;
  --dur-3: 360ms;
  --dur-reveal: 560ms;
  --dur-ambient: 7s;
  --surface-sheen: linear-gradient(145deg, var(--color-surface), var(--color-surface-2));
  --color-action-start: var(--color-action);
  --action-sheen: linear-gradient(135deg, var(--color-action-start), var(--color-action), var(--color-action-hover));
  --card-border-hover: color-mix(in srgb, var(--color-accent) 38%, var(--color-border));
  --shadow-action: 0 8px 20px color-mix(in srgb, var(--color-action) 22%, transparent);
  --blueprint-line: color-mix(in srgb, var(--color-accent) 9%, transparent);
  --mobile-nav-h: 4.5rem;
  --mobile-gutter: 1rem;
  --mobile-radius: 1.25rem;
  --mobile-control-radius: 0.875rem;
  color-scheme: light;
  --color-bg: #f8fafc;
  --color-bg-subtle: #f0f4f9;
  --color-surface: #ffffff;
  --color-surface-2: #f0f4f9;
  --color-stage: #eaf3fc;
  --color-glass: rgb(248 250 252 / 0.92);
  --color-ink: #16263c;
  --color-ink-soft: #243b55;
  --color-muted: #596b80;
  --color-border: #dfe7ef;
  --color-border-strong: #c7d4e2;
  --color-accent: #1464c4;
  --color-accent-text: #1464c4;
  --color-accent-hover: #1054a7;
  --color-accent-soft: #edf4ff;
  --color-accent-line: #bed8f5;
  --color-accent-2: #068fab;
  --color-action: #155db4;
  --color-action-hover: #104e9a;
  --color-action-ink: #ffffff;
  --color-accent-ink: #ffffff;
  --color-charcoal: #111e32;
  --color-charcoal-soft: #19283e;
  --color-inverse-ink: #edf4ff;
  --color-inverse-muted: #a5b6cd;
  --color-secondary: #16263c;
  --color-secondary-soft: #f0f4f9;
  --color-secondary-ink: #16263c;
  --color-ok: #087f75;
  --color-ok-bg: #e8f7f3;
  --color-danger: #be263f;
  --color-danger-bg: #fff0f3;
  --color-warn: #986219;
  --color-warn-bg: #fff6e6;
  --color-info: #1464c4;
  --color-info-bg: #edf4ff;
  --color-code-bg: #f0f4f9;
  --color-code-ink: #16263c;
  --color-overlay: rgb(12 20 36 / 0.6);
  --shadow-xs: 0 1px 3px rgb(25 57 94 / 0.04);
  --shadow-sm: 0 6px 18px rgb(25 57 94 / 0.06);
  --shadow-md: 0 12px 32px rgb(25 57 94 / 0.08);
  --shadow-lg: 0 22px 60px rgb(25 57 94 / 0.12);
  --shadow-stage: 0 18px 46px rgb(25 57 94 / 0.07);
  --shadow-float: 0 12px 36px rgb(25 57 94 / 0.09);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-accent) 30%, transparent);
  --hairline: inset 0 0 0 1px var(--color-border);
  --glow-1: color-mix(in srgb, var(--color-action) 12%, transparent);
  --glow-2: color-mix(in srgb, var(--color-accent-2) 8%, transparent);
}

[dir="rtl"] {
  --tracking-tighter: 0em;
  --tracking-tight: 0em;
  --tracking-wide: 0em;
  --leading-tight: 1.3;
  --leading-snug: 1.45;
  --leading-normal: 1.8;
  --leading-relaxed: 1.9;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0c1424;
  --color-bg-subtle: #19283e;
  --color-surface: #111e32;
  --color-surface-2: #19283e;
  --color-stage: #15243a;
  --color-glass: rgb(12 20 36 / 0.92);
  --color-ink: #edf4ff;
  --color-ink-soft: #d7e5f7;
  --color-muted: #a5b6cd;
  --color-border: #2b3d55;
  --color-border-strong: #405674;
  --color-accent: #79b8ff;
  --color-accent-text: #79b8ff;
  --color-accent-hover: #a0cdff;
  --color-accent-soft: #152b47;
  --color-accent-line: #315479;
  --color-accent-2: #52d0e1;
  --color-secondary: #edf4ff;
  --color-secondary-soft: #19283e;
  --color-secondary-ink: #edf4ff;
  --color-ok: #72d4bd;
  --color-ok-bg: #143532;
  --color-danger: #ff91a3;
  --color-danger-bg: #3a1e2d;
  --color-warn: #f8d395;
  --color-warn-bg: #342c20;
  --color-info: #79b8ff;
  --color-info-bg: #152b47;
  --color-code-bg: #19283e;
  --color-code-ink: #edf4ff;
  --shadow-xs: 0 1px 3px rgb(0 0 0 / 0.15);
  --shadow-sm: 0 6px 18px rgb(0 0 0 / 0.18);
  --shadow-md: 0 12px 32px rgb(0 0 0 / 0.2);
  --shadow-lg: 0 22px 60px rgb(0 0 0 / 0.28);
  --shadow-stage: 0 18px 46px rgb(0 0 0 / 0.2);
  --shadow-float: 0 12px 36px rgb(0 0 0 / 0.25);
}
/* Without JavaScript the base light palette stays readable, even when
   prefers-color-scheme: dark is set on the device. The clock owns JS themes. */
/* Continuous daylight anchors. Intermediate minutes are blended by the clock. */
:root {
  --clock-sky-0: #0b1324;
  --clock-sky-240: #14273a;
  --clock-sky-330: #31485b;
  --clock-sky-390: #c8d8e6;
  --clock-sky-480: #edf5ff;
  --clock-sky-720: #f8fafc;
  --clock-sky-900: #f1f5fb;
  --clock-sky-1020: #cbd9ed;
  --clock-sky-1080: #293b5a;
  --clock-sky-1140: #22314c;
  --clock-sky-1200: #1c283b;
  --clock-sky-1320: #0e1829;
  --clock-sky-1440: #0b1324;
  --clock-white: #ffffff;
  --clock-black: #000000;
  --clock-paper: #f4edda;
  --clock-paper-center: #fffaf0;
  --clock-paper-shade: #d5c6a6;
  --clock-brass: #a17c42;
  --clock-brass-light: #e0c48d;
  --clock-brass-dark: #664921;
  --clock-rim: #27323a;
  --clock-dial-ink: #303944;
  --clock-dial-muted: #72644d;
  --clock-hand: #243b50;
  --clock-hand-minute: #715129;
  --clock-night-accent: #9bc8ff;
  --clock-day-accent: #1256aa;
  --clock-warm-accent: #edb580;
  --clock-cool-accent: #068fab;
  --clock-action-day: #155db4;
  --clock-action-dusk: #4959a5;
  --clock-action-night: #316fba;
  --clock-shadow-day: #19395e;
  --clock-shadow-night: #020913;
  --clock-shadow: rgb(5 10 18 / 0.32);
  --clock-glint: rgb(255 250 240 / 0.55);
  --clock-halo: rgb(161 124 66 / 0.16);
}