/* ============================================================
   YARCOO DESIGN TOKENS — GENERATED FILE, DO NOT EDIT

   Written by scripts/gen-web-tokens.mjs from src/theme.ts.
   Edit the tokens there (or re-sync the design system) and re-run
   `npm run gen:tokens`. Hand edits here are overwritten.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Gabarito:wght@500;600;700;800;900&family=Instrument+Sans:wght@400;500;600;700&family=Vazirmatn:wght@300;400;500;700&display=swap');

:root {

  /* ─── BRAND COLORS ─────────────────────────────────────────── */
  --color-rose-900: #2E121D;
  --color-rose-800: #4E2131;
  --color-rose-700: #7B344A;
  --color-rose-600: #963F5B;
  --color-rose-500: #AF5471;
  --color-rose-400: #C57B91;
  --color-rose-300: #D8A3B6;
  --color-rose-200: #EBCDD8;
  --color-rose-100: #F9EEF2;
  --color-rose-50: #FCF7F8;

  --color-gold-900: #553C1D;
  --color-gold-800: #705027;
  --color-gold-700: #906636;
  --color-gold-600: #B48542;
  --color-gold-500: #C49A4D;
  --color-gold-400: #D4B475;
  --color-gold-300: #E4CFA6;
  --color-gold-200: #EFE5CC;
  --color-gold-100: #F8F3E8;
  --color-gold-50: #FCFAF7;

  --color-terracotta-700: #6C3A2D;
  --color-terracotta-600: #8A4C3B;
  --color-terracotta-500: #A55E4D;
  --color-terracotta-400: #BB7F70;
  --color-terracotta-300: #D2AB9B;
  --color-terracotta-200: #E7D0C6;
  --color-terracotta-100: #F8F1EE;

  --color-lapis-700: #1A3A6B;
  --color-lapis-600: #234E8C;
  --color-lapis-500: #2E65AD;
  --color-lapis-400: #5585C4;
  --color-lapis-300: #88AADB;
  --color-lapis-200: #BDD0EE;
  --color-lapis-100: #E3ECF8;

  /* ─── NEUTRALS ─────────────────────────────────────────────── */
  --color-neutral-950: #100C0D;
  --color-neutral-900: #1E1719;
  --color-neutral-800: #332A2C;
  --color-neutral-700: #4F4446;
  --color-neutral-600: #6E6265;
  --color-neutral-500: #91868A;
  --color-neutral-400: #B3A9AC;
  --color-neutral-300: #D0C9CB;
  --color-neutral-200: #E7E2E3;
  --color-neutral-100: #F4F1F1;
  --color-neutral-50: #FAF7F3;
  --color-neutral-0: #FFFFFF;

  /* ─── STATUS ───────────────────────────────────────────────── */
  --color-success-700: #1A5C3A;
  --color-success-600: #227A4C;
  --color-success-500: #2E9E62;
  --color-success-400: #5DB98A;
  --color-success-200: #B8E8CE;
  --color-success-100: #E2F5EC;

  --color-error-700: #7A1A1A;
  --color-error-600: #9E2626;
  --color-error-500: #C43030;
  --color-error-400: #D96060;
  --color-error-200: #F0BBBB;
  --color-error-100: #FAEAEA;

  --color-warning-600: #8C5A10;
  --color-warning-500: #D4922A;
  --color-warning-100: #FDF3E3;

  /* ─── SURFACES ─────────────────────────────────────────────── */
  --bg-primary: #FAF7F3;
  --bg-elevated: #FFFFFF;
  --bg-sunken: #F3EFEB;
  --bg-dark: #1E1719;
  --bg-dark-elevated: #332A2C;
  --bg-overlay: rgba(30, 23, 25, 0.50);
  --bg-frosted-light: rgba(250, 247, 243, 0.92);
  --bg-frosted-dark: rgba(30, 23, 25, 0.90);

  /* ─── FOREGROUNDS ──────────────────────────────────────────── */
  --fg-primary: #1E1719;
  --fg-secondary: #6E6265;
  --fg-tertiary: #B3A9AC;
  --fg-disabled: #D0C9CB;
  --fg-inverse: #FFFFFF;
  --fg-brand: #7B344A;
  --fg-accent: #B48542;
  --fg-success: #227A4C;
  --fg-error: #9E2626;
  --fg-warning: #8C5A10;

  /* ─── BORDERS ──────────────────────────────────────────────── */
  --border-subtle: rgba(123, 52, 74, 0.08);
  --border-default: rgba(123, 52, 74, 0.16);
  --border-strong: rgba(123, 52, 74, 0.30);
  --border-brand: #7B344A;
  --border-focus: #963F5B;
  --border-on-dark: rgba(255, 255, 255, 0.06);

  /* ─── INTERACTIVE (web-only — see header) ──────────────────── */
  --color-btn-primary-bg: #7B344A;
  --color-btn-primary-bg-hover: #4E2131;
  --color-btn-primary-fg: #FFFFFF;
  --color-btn-secondary-bg: rgba(123, 52, 74, 0.08);
  --color-btn-secondary-fg: #7B344A;
  --color-btn-ghost-fg: #7B344A;
  --color-btn-gold-bg: #B48542;
  --color-btn-gold-fg: #FFFFFF;

  /* ─── SHADOWS (web-only — two-layer, see header) ───────────── */
  --shadow-1: 0 2px 8px rgba(123, 52, 74, 0.08);
  --shadow-2: 0 4px 16px rgba(123, 52, 74, 0.12), 0 1px 4px rgba(123, 52, 74, 0.06);
  --shadow-3: 0 8px 32px rgba(123, 52, 74, 0.14), 0 2px 8px rgba(30, 23, 25, 0.08);
  --shadow-4: 0 24px 64px rgba(30, 23, 25, 0.32), 0 8px 24px rgba(30, 23, 25, 0.16);
  --shadow-card: 0 4px 20px rgba(123, 52, 74, 0.1), 0 1px 4px rgba(123, 52, 74, 0.06);
  --shadow-inset: inset 0 1px 3px rgba(30, 23, 25, 0.1);

  /* ─── RADII ────────────────────────────────────────────────── */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-full: 9999px;

  /* ─── SPACING ──────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ─── TYPE — families (web-only — see header) ──────────────── */
  --font-display: 'Gabarito', 'Helvetica Neue', sans-serif;
  --font-ui: 'Instrument Sans', 'Helvetica Neue', sans-serif;
  --font-brand: 'Gabarito', 'Helvetica Neue', sans-serif;
  --font-farsi: 'Vazirmatn', 'Tahoma', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;

  /* ─── TYPE — scale ─────────────────────────────────────────── */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 30px;
  --text-3xl: 38px;
  --text-4xl: 48px;
  --text-5xl: 64px;
  --text-6xl: 80px;

  /* ─── TYPE — weights ───────────────────────────────────────── */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ─── TYPE — line heights ──────────────────────────────────── */
  --leading-tight: 1.1;
  --leading-snug: 1.2;
  --leading-normal: 1.4;
  --leading-relaxed: 1.6;
  --leading-loose: 1.8;

  /* ─── TYPE — letter spacing ────────────────────────────────── */
  --tracking-tight: -0.03em;
  --tracking-snug: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.14em;

  /* ─── MOTION ───────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 160ms;
  --duration-base: 220ms;
  --duration-slow: 340ms;
  --duration-enter: 400ms;

  /* ─── BLUR (web-only — see header) ─────────────────────────── */
  --blur-sm: blur(8px);
  --blur-md: blur(16px);
  --blur-lg: blur(24px);
  --blur-xl: blur(40px);
}

/* ─── SEMANTIC TYPE STYLES ──────────────────────────────────── */

.display-hero {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  font-style: italic;
}

.display-1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
}

.display-2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}

.title-1 {
  font-family: var(--font-ui);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.title-2 {
  font-family: var(--font-ui);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.title-3 {
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}

.headline {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}

.body {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
}

.body-sm {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
}

.caption {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.label {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}

.label-lg {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}