/* ============================================================================
   DOROSHKE Theme Tokens — v2.0 COBALT LIGHT (approved 2026-09) — LIGHT MODE ONLY
   ----------------------------------------------------------------------------
   White + ice grey + cobalt blue. Petrol / bone / cream / brown are RETIRED.
   Components only read Level B (semantic) or Level C (component) tokens.
   Geometry: rounded corners — 7px controls, 10px cards/lists, 14px containers/
   dialogs, 4px chips. The 45° cut is retired (tokens resolve to no-ops).
   Elevation: 1px border. The modal dialog is the ONLY shadowed element.
   DARK MODE IS DELIBERATELY EXCLUDED. No prefers-color-scheme, no .dark class,
   no [data-theme] switch, no second palette.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Webfonts — both faces ship in assets/fonts/ under SIL OFL 1.1.
   Paths below assume this file sits one level above assets/ (see README).
   In a WordPress theme, the recommended location is:
     wp-content/themes/doroshke/assets/css/theme-tokens.css
     wp-content/themes/doroshke/assets/fonts/*.ttf
   and the url() below becomes ../fonts/...
   Convert to WOFF2 subsets before production (see handoff doc, Dependencies).
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Variable.subset.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.subset.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* ============================================================================
   LEVEL A — PRIMITIVES (cobalt light identity, fixed by the approved reference)
   Do not reference these directly from a component.
   ============================================================================ */
:root {
  /* neutrals */
  --dk-ink: #202936;          /* primary text, dark logo          */
  --dk-muted: #647184;        /* secondary text                   */
  --dk-bg: #F7F9FC;           /* page ground                      */
  --dk-paper: #FFFFFF;        /* primary surface                  */
  --dk-panel: #F3F6FA;        /* secondary surface                */
  --dk-sand: #EDF2F8;         /* light fill (skeleton, zebra)     */
  --dk-line: #E1E7EF;         /* dividers and borders (1px)       */
  --dk-white: #FFFFFF;
  /* brand accent */
  --dk-cobalt: #2454D6;       /* primary actions, links, active nav, selection, focus */
  --dk-cobalt-hover: #1C43B2;
  --dk-cobalt-deep: #173691;  /* pressed                          */
  --dk-selected: #E8EFFF;     /* selected / active-nav background */
  /* on-ink helpers — small ink surfaces inside the light UI only (photo labels, toasts) */
  --dk-on-ink-muted: #A7B2C2;
  --dk-on-ink-accent: #9DB8F5;

  /* legacy aliases — retired petrol identity, resolve to cobalt so nothing breaks */
  --dk-bone: var(--dk-bg);
  --dk-petrol: var(--dk-cobalt);
  --dk-petrol-mid: var(--dk-cobalt-hover);
  --dk-petrol-deep: var(--dk-cobalt-deep);
  --dk-graphite: var(--dk-muted);
  --dk-ash: var(--dk-on-ink-muted);
  --dk-mist: var(--dk-on-ink-accent);

  /* status — UI ONLY, never decorative, never brand */
  --dk-ok: #2E7D4F;
  --dk-warn: #9A6700;
  --dk-err: #B3261E;
  --dk-info: #2F5F98;
  --dk-ok-bg: #EAF4EE;
  --dk-warn-bg: #F9F1DF;
  --dk-err-bg: #FAEAE8;
  --dk-info-bg: #EAF0F9;

  /* derived washes */
  --dk-petrol-wash-08: var(--dk-selected);      /* secondary/ghost hover   */
  --dk-petrol-wash-16: #D6E2FF;                 /* secondary/ghost pressed */
  --dk-cobalt-wash-16: #D6E2FF;
  --dk-err-hover: #98201A;
  --dk-err-active: #7D1A15;
  --dk-bone-15: rgba(255, 255, 255, .18);       /* rules on Ink            */
  --dk-bone-20: rgba(255, 255, 255, .25);       /* rules on Cobalt         */
  --dk-ink-60: rgba(32, 41, 54, .55);           /* modal / drawer scrim    */

  /* photo placeholder — deliberately NOT a palette colour */
  --dk-photo-1: #DDE3EB;
  --dk-photo-2: #B8C0CC;

  /* type primitives */
  --dk-font-persian: "Vazirmatn", "Vazir", Tahoma, sans-serif;
  --dk-font-latin: "Inter", Arial, Helvetica, sans-serif;

  /* spacing primitives — 8px system */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
}

/* ============================================================================
   LEVEL B — SEMANTIC (light mode)
   The only layer a theme change should ever touch.
   The dotted aliases from the theme brief are provided alongside each token.
   ============================================================================ */
:root {
  /* surfaces */
  --surface-page: var(--dk-bg);                 /* background.page     */
  --surface-card: var(--dk-paper);                /* background.surface  */
  --surface-raised: var(--dk-paper);              /* background.raised   */
  --surface-muted: var(--dk-panel);
  --surface-panel: var(--dk-panel);
  --surface-fill: var(--dk-sand);
  --surface-selected: var(--dk-selected);                       /* background.muted    */
  --surface-inverse: var(--dk-ink);               /* background.inverse  */
  --surface-brand: var(--dk-cobalt);              /* action.primary      */
  --surface-brand-hover: var(--dk-cobalt-hover);    /* action.primary-hover   */
  --surface-brand-active: var(--dk-cobalt-deep);  /* action.primary-pressed */
  --surface-brand-wash: var(--dk-selected); /* action.secondary-hover */
  --surface-brand-wash-strong: var(--dk-cobalt-wash-16);
  --surface-disabled: var(--dk-line);             /* action.disabled     */
  --surface-scrim: var(--dk-ink-60);              /* background.scrim    */
  --surface-section-brand: var(--dk-panel);  /* brand sections stay LIGHT */      /* brand section ground   */
  --surface-section-brand-deep: var(--dk-selected);

  /* text */
  --text-body: var(--dk-ink);                     /* text.primary        */
  --text-secondary: var(--dk-muted);           /* text.secondary      */
  --text-muted: var(--dk-muted);               /* text.muted          */
  --text-accent: var(--dk-cobalt);                /* text.accent         */
  --text-on-brand: var(--dk-white);               /* text.on-action      */
  --text-on-inverse: var(--dk-white);              /* text.inverse        */
  --text-secondary-on-inverse: var(--dk-on-ink-muted);
  --text-accent-on-inverse: var(--dk-on-ink-accent);
  --text-disabled: #9AA5B5;                 /* text.disabled       */
  --text-on-status: var(--dk-white);              /* text.on-status      */
  --text-on-section-brand: var(--dk-ink);
  --text-selected: var(--dk-cobalt-hover);        /* text.on-section-brand */
  --text-link: var(--dk-cobalt);                  /* text.link           */
  --text-link-hover: var(--dk-cobalt-hover);

  /* borders + focus */
  --border-default: var(--dk-line);               /* border.default      */
  --border-strong: var(--dk-ink);                 /* border.strong       */
  --border-accent: var(--dk-cobalt);              /* border.accent       */
  --border-on-inverse: var(--dk-bone-15);
  --border-on-brand: var(--dk-bone-20);
  --focus-ring: var(--dk-cobalt);                 /* focus.ring          */

  /* states */
  --state-success: var(--dk-ok);                  /* state.success       */
  --state-warning: var(--dk-warn);                /* state.warning       */
  --state-error: var(--dk-err);                   /* state.error         */
  --state-info: var(--dk-info);                   /* state.info          */
  --state-success-bg: var(--dk-ok-bg);
  --state-warning-bg: var(--dk-warn-bg);
  --state-error-bg: var(--dk-err-bg);
  --state-info-bg: var(--dk-info-bg);

  /* logo — monochrome, never recoloured. Light theme uses the black asset. */
  --logo-ink: var(--dk-ink);
}

/* ============================================================================
   TYPOGRAPHY SCALE
   NOTE ON A KNOWN UPSTREAM COLLISION: the source design system declares
   --text-body twice (a colour in colors.css, a 16px size in typography.css).
   This package resolves --text-body as THE COLOUR and names the size
   --text-size-body. Do not reintroduce the collision.
   ============================================================================ */
:root {
  --font-fa: var(--dk-font-persian);
  --font-en: var(--dk-font-latin);
  --font-body: var(--font-fa);
  --font-display: var(--font-fa);
  --font-data: var(--font-en);

  --text-display: 40px;   --lh-display: 1.25;
  --text-h1: 27px;        --lh-h1: 1.5;
  --text-h2: 21px;        --lh-h2: 1.5;
  --text-h3: 16px;        --lh-h3: 1.5;
  --text-size-body: 14px; --lh-body: 1.8;
  --text-caption: 12px;   --lh-caption: 1.7;   /* absolute minimum size */
  --text-price: 20px;     --lh-price: 1.2;
  --text-stat: 32px;      --lh-stat: 1.1;
  --text-table: 13px;     --lh-table: 1.6;
  --text-label: 13px;     --lh-label: 1;
  --text-button: 13px;    --lh-button: 1;
  --weight-h1: 800;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-vin: .06em;
  --tracking-eyebrow: .14em;
  --measure-body: 70ch;
}

/* ============================================================================
   GEOMETRY, GRID, METRICS, MOTION
   ============================================================================ */
:root {
  --radius-xs: 4px;   /* chips, counts */
  --radius-sm: 7px;   /* buttons, inputs, nav items */
  --radius-md: 10px;  /* cards, lists, rows */
  --radius-lg: 14px;  /* containers, dialogs */
  --radius-full: 999px;
  --radius: var(--radius-md);
  --shadow-dialog: 0 20px 70px rgba(32, 41, 54, .13);   /* modal only */
  --cut-sm: 0px;             /* retired 45° cut — no-op */
  --cut-lg: 0px;             /* retired 45° cut — no-op */
  --clip-cut-sm: none;
  --clip-cut-lg: none;

  --border-width: 1px;
  --focus-width: 2px;
  --focus-offset: 3px;

  --grid-max: 1200px;
  --grid-cols: 12;
  --grid-gutter: 24px;
  --grid-margin: 24px;
  --grid-cols-mobile: 4;
  --grid-gutter-mobile: 16px;
  --grid-margin-mobile: 16px;
  --bp-mobile: 600px;
  --bp-tablet: 900px;

  --control-h: 44px;
  --control-h-sm: 36px;
  --control-h-lg: 52px;
  --chip-h: 24px;
  --chip-h-filter: 32px;
  --header-h: 64px;
  --header-h-mobile: 56px;
  --touch-min: 44px;
  --logo-min-lockup: 140px;
  --logo-min-mark: 24px;

  --ease: cubic-bezier(.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
}

/* ============================================================================
   LEVEL C — COMPONENT TOKENS
   Every one resolves through a var() chain to Level B. Never to a hex.
   ============================================================================ */
:root {
  /* Button */
  --button-primary-background: var(--surface-brand);
  --button-primary-text: var(--text-on-brand);
  --button-primary-hover: var(--surface-brand-hover);
  --button-primary-pressed: var(--surface-brand-active);
  --button-secondary-border: var(--border-accent);
  --button-secondary-text: var(--text-accent);
  --button-secondary-hover: var(--surface-brand-wash);
  --button-secondary-pressed: var(--surface-brand-wash-strong);
  --button-ghost-text: var(--text-accent);
  --button-ghost-hover: var(--surface-brand-wash);
  --button-destructive-background: var(--state-error);
  --button-destructive-hover: var(--dk-err-hover);
  --button-destructive-pressed: var(--dk-err-active);
  --button-destructive-text: var(--dk-white);
  --button-inverse-background: var(--dk-white);
  --button-inverse-text: var(--dk-cobalt);
  --button-inverse-hover: var(--dk-selected);
  --button-inverse-pressed: var(--dk-cobalt-wash-16);
  --button-disabled-background: var(--surface-disabled);
  --button-disabled-text: #9AA5B5;
  --button-height: var(--control-h);
  --button-height-sm: var(--control-h-sm);
  --button-height-lg: var(--control-h-lg);
  --button-padding-x: var(--space-4);
  --button-font-size: var(--text-button);
  --button-font-weight: var(--weight-semibold);
  --button-radius: var(--radius-sm);
  --button-cut: var(--cut-sm);

  /* Card */
  --card-background: var(--surface-card);
  --card-border: var(--border-default);
  --card-border-hover: var(--border-accent);
  --card-padding: var(--space-3);
  --card-radius: var(--radius-md);
  --card-cut: var(--cut-lg);
  --card-title-size: var(--text-h3);

  /* Input / form controls */
  --input-background: var(--surface-card);
  --input-border: var(--border-default);
  --input-border-hover: var(--text-secondary);
  --input-border-focus: var(--border-accent);
  --input-border-error: var(--state-error);
  --input-height: var(--control-h);
  --input-height-sm: var(--control-h-sm);
  --input-padding-x: var(--space-3);
  --input-text: var(--text-body);
  --input-placeholder: var(--text-secondary);
  --input-disabled-background: var(--surface-muted);
  --input-disabled-text: var(--text-disabled);
  --checkbox-size: 20px;
  --switch-width: 40px;
  --switch-height: 24px;
  --switch-thumb: var(--dk-white);

  /* Navigation */
  --navigation-background: var(--surface-card);
  --navigation-border: var(--border-default);
  --navigation-text: var(--text-body);
  --navigation-text-hover: var(--text-accent);
  --navigation-active-indicator: var(--surface-brand);
  --navigation-active-background: var(--surface-selected);
  --navigation-active-text: var(--text-selected);
  --navigation-height: var(--header-h);
  --navigation-height-mobile: var(--header-h-mobile);

  /* Table */
  --table-header-background: transparent;   /* rule only, never a fill */
  --table-header-rule: var(--border-default);
  --table-row-border: var(--border-default);
  --table-zebra: var(--surface-muted);
  --table-key-text: var(--text-secondary);
  --table-font-size: var(--text-table);
  --table-cell-padding: 10px var(--space-2);

  /* Alert */
  --alert-padding: 12px var(--space-3);
  --alert-border-width: var(--border-width);

  /* StatusLabel filled + Stepper error: foreground on a state ground */
  --status-filled-text: var(--text-on-status);
  --stepper-error-text: var(--text-on-status);

  /* Section grounds */
  --section-brand-text: var(--text-on-section-brand);

  /* Badge / Chip / StatusLabel */
  --badge-background: var(--surface-selected);
  --badge-text: var(--text-selected);
  --chip-height: var(--chip-h);
  --chip-height-filter: var(--chip-h-filter);
  --chip-border: var(--border-default);
  --chip-text: var(--text-body);
  --chip-font-size: var(--text-caption);

  /* Footer */
  --footer-background: var(--surface-card);   /* light footer */
  --footer-text: var(--text-body);
  --footer-text-secondary: var(--text-secondary);
  --footer-border: var(--border-default);
  --footer-heading: var(--text-label);

  /* Overlay */
  --overlay-scrim: var(--surface-scrim);
  --overlay-radius: var(--radius-lg);
  --overlay-shadow: var(--shadow-dialog);
  --overlay-cut: var(--cut-lg);
  --overlay-background: var(--surface-card);
  --overlay-border: var(--border-default);
  --overlay-max-width: 560px;
  --drawer-width: 360px;

  /* Price */
  --price-figure-size: var(--text-price);
  --price-figure-weight: var(--weight-bold);
  --price-unit-size: var(--text-size-body);
  --price-unit-weight: var(--weight-medium);

  /* Image frame */
  --image-frame-background: var(--dk-photo-1);
  --image-frame-radius: var(--radius-md);
  --image-frame-cut: var(--cut-lg);
}

/* ============================================================================
   BASE + BIDI HELPERS
   Set dir="rtl" lang="fa" on <html>. In WordPress: add_filter('language_attributes').
   ============================================================================ */

/* Required: the container and every padded surface in this theme sizes with
   width/max-width PLUS logical padding. Without border-box they overflow. */
*,
*::before,
*::after { box-sizing: border-box; }

.dk-root,
.dk-body {
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--surface-page);
  font-size: var(--text-size-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* Every Latin run inside Persian text MUST be isolated. */
.dk-ltr,
.dk-en {
  font-family: var(--font-en);
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}
.dk-num {
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}
.dk-vin {
  font-family: var(--font-en);
  letter-spacing: var(--tracking-vin);
  text-transform: uppercase;
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}
.dk-eyebrow {
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.dk-measure { max-width: var(--measure-body); }

.dk-cut { border-radius: var(--radius-sm); }
.dk-cut-lg { border-radius: var(--radius-lg); }
/* Light mode only: never follow the OS/browser scheme. */
:root, .dk-root, .dk-body { color-scheme: light only; }

/* Inline links only. The :not() chain is load-bearing: an <a> carrying a control
   class (.dk-btn*, .dk-icon-btn, .dk-header__link, .dk-mobile-nav__link,
   .dk-pagination__cell, .dk-chip--filter) is a CONTROL, not a link, and must keep
   its own component colour and no underline. Those classes are single-class
   (0,1,0) selectors, so an unscoped ".dk-body a" (0,1,1) would override them —
   which previously rendered the header CTA as Petrol-on-Petrol.
   The exclusions sit inside :where() so they add NO specificity — the rule stays
   (0,1,1) and component-scoped descendant rules still win.
   Component-scoped descendant links (.dk-footer__list a, .dk-breadcrumb a,
   .dk-vehicle__title a) are (0,1,1) in theme-components.css and still win. */
.dk-a,
.dk-body a:not(:where([class*="dk-btn"], [class*="dk-icon-btn"], [class*="__link"], .dk-pagination__cell, .dk-chip--filter)) {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.dk-a:hover,
.dk-body a:not(:where([class*="dk-btn"], [class*="dk-icon-btn"], [class*="__link"], .dk-pagination__cell, .dk-chip--filter)):hover { color: var(--text-link-hover); }

/* Belt and braces for consumers who port the components but keep this file. */
a.dk-btn,
a.dk-icon-btn { text-decoration: none; }

.dk-focus:focus-visible,
.dk-body :focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Container — the one layout primitive. */
.dk-container {
  width: 100%;
  max-width: var(--grid-max);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}
.dk-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--grid-gutter);
}

@media (max-width: 900px) {
  .dk-container { padding-inline: var(--grid-margin-mobile); }
}
@media (max-width: 600px) {
  .dk-grid {
    grid-template-columns: repeat(var(--grid-cols-mobile), minmax(0, 1fr));
    gap: var(--grid-gutter-mobile);
  }
}

/* Functional motion only. Nothing decorative animates in this theme. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}