/* Design tokens (catalio-design/DESIGN.md, «کاتالوگ»). Every color, radius and font comes from here.
   Light is the main theme; [data-theme="dark"] overrides. One brand green (pine) for actions and "published",
   saffron only for prices, tokens and drafts. No glow, glass or gradient text: those tokens are kept flat so
   older markup keeps working. */
@font-face {
  font-family: "Vazirmatn";
  src: url("/static/fonts/Vazirmatn[wght].woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {  /* headings, numbers (OFL, fonts/Estedad-OFL.txt) */
  font-family: "Estedad";
  src: url("/static/fonts/Estedad[wght].woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* radii */
  --r-xs: 8px; --r-sm: 10px; --r-md: 12px; --r-lg: 16px; --r-xl: 18px; --r-2xl: 22px; --r-pill: 999px;

  /* type */
  --font: "Vazirmatn", Tahoma, sans-serif;
  --font-display: "Estedad", "Vazirmatn", Tahoma, sans-serif;
  --fs-hero: clamp(38px, 4.6vw, 60px);
  --fs-section: clamp(28px, 3.4vw, 44px);
  --fs-card: 19px;

  /* motion */
  --t-fast: 120ms; --t-base: 200ms; --ease: cubic-bezier(.2, .8, .2, 1);

  /* partner brand colours (logos only) */
  --c-woocommerce: #7F54B3; --c-wordpress: #21759B; --c-mixin: #464A91; --c-rankmath: #6666C3;
  --c-yoast: #A4286A; --c-bale: #00B894; --c-telegram: #26A5E4;
}

/* --- light theme: the main one ---------------------------------------------------------------------- */
:root {
  --bg: #F6F7F5;            /* site pages */
  --ground: #EEF1EF;        /* behind the dashboard panels */
  --film-ground: #07110F;   /* behind the intro video (its own dark frame, both themes) */
  --surface: #FFFFFF;
  --surface-2: #F6F7F5;     /* sunken: inputs' hover, table heads */
  --surface-3: #EEF1EF;
  --line: #E1E6E3;
  --line-strong: #C6D0CC;
  --fg: 11 23 21;           /* overlays: rgb(var(--fg) / .06) */
  --shade: .25;             /* shadow strength: rgb(0 0 0 / calc(.5 * var(--shade))) */

  --text: #24332F;
  --text-strong: #0B1715;
  --text-soft: #34443F;
  --text-muted: #4E5F5B;
  --text-faint: #5F706B;

  --accent: #0E7C6B;        /* pine: buttons, fills, "published" */
  --accent-light: #0E7C6B;  /* accent as text and icons */
  --accent-deep: #0A6356;   /* hover */
  --accent-top: #0E7C6B;
  --accent-mint: #0A6356;
  --accent-ink: #FFFFFF;    /* text on the accent */
  --accent-a10: #E3F1EE;
  --accent-a16: rgba(14, 124, 107, .16);
  --accent-a30: #B9DDD5;
  --cyan: #0E7C6B;
  --logo-teal: #17B3A0;

  --spark: #E0A43A;         /* saffron: prices, tokens, drafts */
  --spark-text: #8A5A0B;
  --spark-soft: #6B4508;
  --spark-a10: #FBF1DE;
  --spark-a30: #F1DDB4;
  --spark-ink: #0B1715;

  /* what tokens were spent on (token gauge): one colour per use, all distinct from the pine 'left' */
  --use-product: #E0A43A; --use-revision: #4C6FD6; --use-copy: #8E5BC9; --use-bulk: #D9694A; --use-admin: #A3AFAB;

  --danger: #B42318;
  --danger-soft: #FDECEA;
  --danger-text: #B42318;
  --danger-strong: #8F1C13;
  --info: #2B4C9B;
  --info-text: #2B4C9B;
  --info-soft: #E8EEFB;
  --link-hover: #0A6356;

  --glass-top: var(--surface);
  --glass-bottom: var(--surface);
  --glass-line: var(--line);
  --glass-hi: transparent;
  --field-bg: #FFFFFF;
  --popover: #FFFFFF;
  --thumb-bg: #EEF1EF;
  --avatar-bg: #E3F1EE;
  --bubble-2: #E3F1EE;
  --ring-core: #F6F7F5;

  --shadow-deep: 0 1px 2px rgb(11 23 21 / .04);
  --shadow-float: 0 24px 48px -24px rgb(11 23 21 / .30);
  --grad-edge: linear-gradient(var(--line), var(--line));
  --grad-heading: linear-gradient(var(--text-strong), var(--text-strong));
  --grad-accent-text: linear-gradient(var(--accent-light), var(--accent-light));
  --grad-primary: linear-gradient(var(--accent), var(--accent));
  --grad-tile: linear-gradient(var(--accent), var(--accent));
  --glow-accent: none;

  color-scheme: light;
}

/* --- dark theme: the same design, quieter (chosen by the user, cookie "theme") ------------------------- */
:root[data-theme="dark"] {
  --bg: #0E1312;
  --ground: #0B0F0E;
  --surface: #151C1A;
  --surface-2: #111715;
  --surface-3: #1C2523;
  --line: #263230;
  --line-strong: #36443F;
  --fg: 255 255 255;
  --shade: 1;

  --text: #DCE5E2;
  --text-strong: #F3F7F6;
  --text-soft: #C3D0CC;
  --text-muted: #A3B3AF;
  --text-faint: #8A9A96;

  --accent: #4FD1BC;
  --accent-light: #6FDCCA;
  --accent-deep: #7FE3D3;
  --accent-top: #4FD1BC;
  --accent-mint: #8FE6D8;
  --accent-ink: #06231E;
  --accent-a10: #17302B;
  --accent-a16: rgba(79, 209, 188, .18);
  --accent-a30: #2A4E47;
  --cyan: #4FD1BC;

  --spark: #E0A43A;
  --spark-text: #F2C063;
  --spark-soft: #F5D08A;
  --spark-a10: #33280F;
  --spark-a30: #5A4518;
  --spark-ink: #0B1715;

  --use-product: #E0A43A; --use-revision: #7F9BEA; --use-copy: #B48BE6; --use-bulk: #EC8A6E; --use-admin: #5E6C68;

  --danger: #F28B82;
  --danger-soft: #3A1A18;
  --danger-text: #F5A39B;
  --danger-strong: #F8C2BC;
  --info: #9DB4F2;
  --info-text: #9DB4F2;
  --info-soft: #1C2440;
  --link-hover: #8FE6D8;

  --field-bg: #111715;
  --popover: #1A2220;
  --thumb-bg: #1C2523;
  --avatar-bg: #17302B;
  --bubble-2: #22302D;
  --ring-core: #1A2A28;

  --shadow-deep: none;
  --shadow-float: 0 24px 48px -20px rgb(0 0 0 / .7);

  color-scheme: dark;
}