/*
 * Paytakht136 design tokens.
 * Breakpoints follow apple.com: 1068px (desktop) and 734px (mobile).
 * Colour: neutral Apple-style surfaces + the store's warm orange.
 *   --p136-brand  (#df601e, the leaf of the "136" mark) is the logo/brand colour, used for large shapes and accents.
 *   --p136-accent (#c9431b) is the darker orange used for text, buttons and focus so it passes contrast.
 */
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Colour */
  --p136-ink: #1d1d1f;
  --p136-ink-2: #424245;
  --p136-muted: #636366;
  --p136-faint: #6e6e73;
  --p136-bg: #ffffff;
  --p136-surface: #f5f5f7;
  --p136-surface-2: #fbfbfd;
  --p136-line: #d2d2d7;
  --p136-line-soft: #e8e8ed;
  --p136-brand: #df601e;
  --p136-accent: #bf3d15;
  --p136-accent-hover: #9d3212;
  --p136-accent-tint: #fff4ee;
  --p136-dark: #000000;
  --p136-dark-2: #161617;
  --p136-on-dark: #f5f5f7;
  --p136-on-dark-muted: #a1a1a6;
  --p136-ok: #1a7f37;
  --p136-ok-tint: #e9f7ee;
  --p136-warn: #9a6700;
  --p136-warn-tint: #fff6e0;
  --p136-danger: #b3261e;
  --p136-danger-tint: #fdecea;
  --p136-focus: var(--p136-accent);
  --p136-glass: rgba(255, 255, 255, 0.72);
  --p136-glass-dark: rgba(29, 29, 31, 0.72);

  /* Type */
  --p136-font: "Vazirmatn", "Segoe UI", Tahoma, system-ui, sans-serif;
  --p136-fs-eyebrow: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --p136-fs-body: 1rem;
  --p136-fs-small: 0.8125rem;
  --p136-fs-tiny: 0.6875rem;
  --p136-fs-h4: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --p136-fs-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --p136-fs-h2: clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem);
  --p136-fs-h1: clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem);
  --p136-fs-hero: clamp(2rem, 1.3rem + 3vw, 3.5rem);
  --p136-lh-body: 1.7;
  --p136-lh-tight: 1.22;
  --p136-lh-display: 1.12;

  /* Space (8px rhythm) */
  --p136-s1: 4px;
  --p136-s2: 8px;
  --p136-s3: 12px;
  --p136-s4: 16px;
  --p136-s5: 24px;
  --p136-s6: 32px;
  --p136-s7: 48px;
  --p136-s8: 64px;
  --p136-s9: 96px;
  --p136-section: 80px;

  /* Layout */
  --p136-page: 1120px;
  --p136-wide: 1320px;
  --p136-read: 680px;
  --p136-gutter: clamp(16px, 4vw, 24px);
  --p136-header-h: 48px;
  --p136-ribbon-h: 32px;

  /* Shape */
  --p136-r-xs: 8px;
  --p136-r-sm: 12px;
  --p136-r-md: 18px;
  --p136-r-lg: 28px;
  --p136-r-pill: 980px;

  /* Elevation */
  --p136-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --p136-shadow-md: 0 8px 28px rgba(0, 0, 0, 0.1);
  --p136-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.18);

  /* Motion */
  --p136-ease: cubic-bezier(0.28, 0.11, 0.32, 1);
  --p136-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --p136-t-fast: 160ms;
  --p136-t-med: 320ms;
  --p136-t-slow: 640ms;

  /* Stacking */
  --p136-z-header: 100;
  --p136-z-flyout: 110;
  --p136-z-sticky: 90;
  --p136-z-sheet: 200;
}

@media (max-width: 1068px) {
  :root { --p136-section: 64px; }
}

@media (max-width: 734px) {
  :root {
    --p136-section: 48px;
    --p136-header-h: 44px;
  }
}