/* ============================================================
   Omid Bookshop Design System — tokens.css
   کتابفروشی اُمید · omidbookshop.ir
   Brand tokens from the ۱۴۰۵ strategy proposal.
   Source typography: self-hosted Vazirmatn FD (Farsi digits).
   Optional original source (not used at runtime):
   https://github.com/rastikerdar/vazirmatn
   ============================================================ */

@font-face {
  font-family: "Vazirmatn";
  src: url("fonts/Vazirmatn-FD-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
    U+0600-06FF, U+0750-077F, U+08A0-08FF, U+2000-206F, U+2074,
    U+20A0-20CF, U+2212, U+2215, U+FB50-FDFF, U+FE70-FEFF;

}

@font-face {
  font-family: "Vazirmatn";
  src: url("fonts/Vazirmatn-FD-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
    U+0600-06FF, U+0750-077F, U+08A0-08FF, U+2000-206F, U+2074,
    U+20A0-20CF, U+2212, U+2215, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("fonts/Vazirmatn-FD-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
    U+0600-06FF, U+0750-077F, U+08A0-08FF, U+2000-206F, U+2074,
    U+20A0-20CF, U+2212, U+2215, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("fonts/Vazirmatn-FD-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
    U+0600-06FF, U+0750-077F, U+08A0-08FF, U+2000-206F, U+2074,
    U+20A0-20CF, U+2212, U+2215, U+FB50-FDFF, U+FE70-FEFF;
}


/* Latin digits for code, hex values, and SKUs that must stay ASCII. */
@font-face {
  font-family: "Vazirmatn Latin Digits";
  src: url("fonts/Vazirmatn-LatinDigits.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0023, U+0030-0039;
}
/* ----------------------------------------------------------
   Color scales
   Brand anchors (proposal p.05):
     burgundy #672A41 · cream #FAF6EE · sage #DDE6DB
     gold     #E3BB6C · coral #CF785B
   Rule 70 / 20 / 10: light ground / burgundy+sage / accents.
   ---------------------------------------------------------- */

:root {
  /* Burgundy — زرشکی عمیق. 700 is the brand anchor. */
  --color-burgundy-50: #F7F1F3;
  --color-burgundy-100: #EDE4E8;
  --color-burgundy-200: #D9C6CE;
  --color-burgundy-300: #C09EAB;
  --color-burgundy-400: #A06B7C;
  --color-burgundy-500: #824756;
  --color-burgundy-600: #733548;
  --color-burgundy-700: #672A41;
  --color-burgundy-800: #4E2032;
  --color-burgundy-900: #3A1825;
  --color-burgundy-950: #241016;

  /* Cream / paper — کرم کاغذی. 200 is the brand canvas. */
  --color-cream-50: #FFFEFB;
  --color-cream-100: #FFFCF7;
  --color-cream-200: #FAF6EE;
  --color-cream-300: #F3EBDD;
  --color-cream-400: #E8DFD0;
  --color-cream-500: #D4C8B6;
  --color-cream-600: #B7A894;
  --color-cream-700: #8C7B68;
  --color-cream-800: #5C4E42;
  --color-cream-900: #2C241E;

  /* Sage — سبز مریم‌گلی. 200 is the brand wash. */
  --color-sage-50: #F5F8F5;
  --color-sage-100: #EEF3EE;
  --color-sage-200: #DDE6DB;
  --color-sage-300: #C5D0C3;
  --color-sage-400: #A3B3A1;
  --color-sage-500: #7E917C;
  --color-sage-600: #5F725D;
  --color-sage-700: #4A5A48;
  --color-sage-800: #3A4A3A;
  --color-sage-900: #2A362A;

  /* Gold — طلایی گرم. 400 is the brand accent (not a text color). */
  --color-gold-50: #FDF8EE;
  --color-gold-100: #FBF5EA;
  --color-gold-200: #F7ECD6;
  --color-gold-300: #F2E0BD;
  --color-gold-400: #E3BB6C;
  --color-gold-500: #C9A660;
  --color-gold-600: #A78951;
  --color-gold-700: #836A40;
  --color-gold-800: #6E5936;
  --color-gold-900: #524129;

  /* Coral — مرجانی محدود. 500 is the brand accent. */
  --color-coral-50: #FCF7F5;
  --color-coral-100: #F8ECE8;
  --color-coral-200: #F2D9D1;
  --color-coral-300: #E9C2B5;
  --color-coral-400: #DEA38F;
  --color-coral-500: #CF785B;
  --color-coral-600: #B86B51;
  --color-coral-700: #9F5C47;
  --color-coral-800: #8B513F;
  --color-coral-900: #724234;

  /* Ink */
  --color-ink: #1A1216;
  --color-ink-soft: #4A333C;
  --color-ink-muted: #5C4A4E;
  --color-white: #FFFFFF;

  /* ---------- Semantic color ---------- */
  --color-bg: var(--color-cream-200);
  --color-bg-raised: var(--color-cream-100);
  --color-bg-sunken: var(--color-cream-300);
  --color-bg-inverse: var(--color-burgundy-800);
  --color-bg-overlay: rgba(36, 16, 22, 0.48);

  --color-text: var(--color-ink);
  --color-text-secondary: var(--color-ink-soft);
  --color-text-muted: var(--color-ink-muted);
  --color-text-inverse: var(--color-cream-200);
  --color-text-link: var(--color-burgundy-700);
  --color-text-link-hover: var(--color-burgundy-800);

  --color-border: var(--color-cream-400);
  --color-border-strong: var(--color-cream-500);
  --color-border-focus: var(--color-burgundy-700);

  --color-primary: var(--color-burgundy-700);
  --color-primary-hover: var(--color-burgundy-800);
  --color-primary-active: var(--color-burgundy-900);
  --color-primary-soft: var(--color-burgundy-50);
  --color-on-primary: var(--color-white);

  --color-accent-gold: var(--color-gold-400);
  --color-accent-gold-text: var(--color-gold-800);
  --color-accent-coral: var(--color-coral-500);
  --color-accent-coral-text: var(--color-coral-700);
  --color-accent-sage: var(--color-sage-200);
  --color-accent-sage-text: var(--color-sage-700);

  --color-success: #2F5D40;
  --color-success-soft: var(--color-sage-100);
  --color-on-success: var(--color-white);
  --color-warning: var(--color-gold-800);
  --color-warning-soft: var(--color-gold-100);
  --color-danger: #8F2D3A;
  --color-danger-soft: #F8ECEC;
  --color-on-danger: var(--color-white);
  --color-info: var(--color-burgundy-600);
  --color-info-soft: var(--color-burgundy-50);

  /* Category roles */
  --color-cat-books: var(--color-burgundy-700);
  --color-cat-used: var(--color-gold-800);
  --color-cat-stationery: var(--color-sage-700);
  --color-cat-games: var(--color-coral-700);
  --color-cat-explore: var(--color-sage-800);
  --color-cat-podcast: var(--color-burgundy-800);

  /* Condition grades (used books) */
  --color-condition-like-new: var(--color-sage-700);
  --color-condition-very-good: #3F6B4E;
  --color-condition-good: var(--color-gold-800);
  --color-condition-acceptable: var(--color-coral-700);
  --color-condition-defective: var(--color-danger);

  /* ---------- Typography ---------- */
  --font-sans: "Vazirmatn", "Tahoma", "Segoe UI", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Mobile-first type scale. Desktop bumps live under the lg query below. */
  --font-size-display: 2rem;      /* 32 */
  --font-size-h1: 1.75rem;        /* 28 */
  --font-size-h2: 1.375rem;       /* 22 */
  --font-size-h3: 1.125rem;       /* 18 */
  --font-size-h4: 1rem;           /* 16 */
  --font-size-body: 1rem;         /* 16 */
  --font-size-sm: 0.875rem;       /* 14 */
  --font-size-caption: 0.75rem;   /* 12 */
  --font-size-overline: 0.75rem;

  --line-height-display: 1.25;
  --line-height-heading: 1.35;
  --line-height-body: 1.75;
  --line-height-tight: 1.4;

  --letter-spacing-overline: 0.04em;
  --measure-prose: 42rem;

  /* ---------- Spacing (4px base) ---------- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */

  /* ---------- Radii ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ---------- Shadows (warm, burgundy-tinted, quiet) ---------- */
  --shadow-sm: 0 1px 2px rgba(36, 16, 22, 0.06);
  --shadow-md: 0 4px 16px rgba(36, 16, 22, 0.08);
  --shadow-lg: 0 12px 32px rgba(36, 16, 22, 0.12);
  --shadow-sheet: 0 -8px 32px rgba(36, 16, 22, 0.16);
  --shadow-drawer: -8px 0 32px rgba(36, 16, 22, 0.16);

  /* ---------- Breakpoints (documented; use raw values in CSS) ----------
     sm 480 · md 768 · lg 1024 · xl 1280
     ---------------------------------------------------------- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ---------- Grid / container ---------- */
  /* --container-max is the max CONTENT width; padding sits outside it. */
  --container-max: 72rem; /* 1152px */
  --container-pad: 1.5rem; /* 24px mobile */
  --grid-columns: 4;
  --grid-gutter: 1rem;

  /* ---------- Elevation / z-index ---------- */
  --z-base: 1;
  --z-sticky: 20;
  --z-header: 30;
  --z-bottom-nav: 35;
  --z-dropdown: 40;
  --z-overlay: 50;
  --z-drawer: 60;
  --z-toast: 70;
  --z-modal: 80;

  /* ---------- Chrome sizes ---------- */
  --header-height: 3.5rem;
  --bottom-nav-height: 4rem;
  --focus-ring: 2px solid var(--color-gold-600);
  --focus-offset: 2px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration: 200ms;
  --duration-slow: 320ms;

  /* Admin shell (desktop-first panel) */
  --admin-sidebar-width: 16rem;
  --admin-sidebar-width-md: 13.5rem;
  --admin-content-max: 86rem;
  --admin-bulk-bg: var(--color-burgundy-950);
  --admin-bulk-fg: var(--color-cream-100);

}

@media (min-width: 768px) {
  :root {
    --container-pad: 2rem; /* 32px */
    --grid-columns: 8;
    --grid-gutter: 1.5rem;
    --header-height: 4.5rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --font-size-display: 2.5rem; /* 40 */
    --font-size-h1: 2rem;        /* 32 */
    --font-size-h2: 1.5rem;      /* 24 */
    --font-size-h3: 1.25rem;     /* 20 */
    --font-size-h4: 1.125rem;    /* 18 */
    --container-pad: 2.5rem; /* 40px */
    --grid-columns: 12;
  }
}

@media (min-width: 1280px) {
  :root {
    --container-pad: 3rem; /* 48px at the 1280 reference width */
  }
}

/* ----------------------------------------------------------
   Base
   ---------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  direction: rtl;
  hanging-punctuation: first allow-end last;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html:lang(fa),
html[lang="fa"] {
  direction: rtl;
}

code, kbd, pre {
  font-family: "Vazirmatn Latin Digits", var(--font-sans);
  font-size: 0.92em;
  direction: ltr;
  unicode-bidi: isolate;
}

body {
  margin: 0;
  overflow-x: clip;
  max-width: 100%;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background: var(--color-bg);
  font-feature-settings: "ss01" 0, "tnum" 1;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
}

a {
  color: var(--color-text-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--color-text-link-hover);
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

::selection {
  background: var(--color-burgundy-100);
  color: var(--color-burgundy-900);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  color: var(--color-burgundy-800);
  text-wrap: balance;
}

h1, .ds-h1 { font-size: var(--font-size-h1); }
h2, .ds-h2 { font-size: var(--font-size-h2); }
h3, .ds-h3 { font-size: var(--font-size-h3); }
h4, .ds-h4 { font-size: var(--font-size-h4); }

.ds-display {
  font-size: var(--font-size-display);
  line-height: var(--line-height-display);
  font-weight: var(--font-weight-bold);
  color: var(--color-burgundy-800);
}

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

small, .ds-sm { font-size: var(--font-size-sm); line-height: var(--line-height-tight); }
.ds-caption { font-size: var(--font-size-caption); color: var(--color-text-muted); line-height: 1.6; }
.ds-overline {
  font-size: var(--font-size-overline);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-overline);
  text-transform: none;
  color: var(--color-text-muted);
}

.ds-prose { max-width: var(--measure-prose); }
.ds-muted { color: var(--color-text-muted); }
.ds-secondary { color: var(--color-text-secondary); }

/* Verified WCAG AA contrast helpers (see tokens.json → contrast.pairs) */
.ds-on-cream { color: var(--color-text); background: var(--color-bg); }
.ds-on-primary { color: var(--color-on-primary); background: var(--color-primary); }
.ds-on-inverse { color: var(--color-text-inverse); background: var(--color-bg-inverse); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}