/**
 * Design tokens, from the Figma file 7-gooy-gallery (Color Palette page and
 * the variables used by the home page and component frames).
 *
 * Two layers:
 *   1. Raw scales: copied verbatim from Figma variables. Do not edit by eye.
 *   2. Semantic roles: what components consume. Map a role to a scale step;
 *      never use a raw scale or a hex value in component CSS.
 *
 * Known Figma inconsistencies, kept as-is until the designer confirms:
 *   - Primary/300 equals Primary/200 (#f79a7f).
 *   - Info/800 equals Info/700; Banner-bc-blue/600 equals /500.
 *   - Body font is IRANYekan on the home page, IRANSansX / Yekan Bakh FaNum in
 *     some component variants. IRANYekanX is used here.
 *
 * Breakpoints (custom properties cannot be used inside media queries; use the
 * literal values): 576px · 768px · 1024px · 1280px. Figma has a 1440 desktop
 * frame with a 1280 content column.
 */
:root {
  /* ---- Raw scales ------------------------------------------------------ */
  --color-white: #fff;

  --color-primary-0: #feeeea;
  --color-primary-50: #fcddd4;
  --color-primary-100: #f9bcaa;
  --color-primary-200: #f79a7f;
  --color-primary-300: #f79a7f;
  --color-primary-400: #f47955;
  --color-primary-500: #f1572a;
  --color-primary-600: #c14622;
  --color-primary-700: #913419;
  --color-primary-800: #602311;
  --color-primary-900: #180904;

  --color-secondary-50: #e9ebf0;
  --color-secondary-100: #d2d7e0;
  --color-secondary-200: #a5aec2;
  --color-secondary-300: #7986a3;
  --color-secondary-400: #4c5d85;
  --color-secondary-500: #1f3566;
  --color-secondary-600: #192a52;
  --color-secondary-700: #13203d;
  --color-secondary-800: #0c1529;
  --color-secondary-900: #03050a;

  --color-gray-50: #e9e9e9;
  --color-gray-100: #d3d3d3;
  --color-gray-200: #a7a7a7;
  --color-gray-300: #7c7c7c;
  --color-gray-400: #505050;
  --color-gray-500: #242424;
  --color-gray-600: #1d1d1d;
  --color-gray-700: #161616;
  --color-gray-800: #0e0e0e;
  --color-gray-900: #040404;

  --color-error-50: #fdeced;
  --color-error-100: #fbdadb;
  --color-error-200: #f8b5b8;
  --color-error-300: #f48f94;
  --color-error-400: #f16a71;
  --color-error-500: #ed454d;
  --color-error-600: #be373e;
  --color-error-700: #8e292e;
  --color-error-800: #2f0e0f;
  --color-error-900: #180708;

  --color-success-50: #e8f4f0;
  --color-success-100: #d0eae1;
  --color-success-200: #a1d5c3;
  --color-success-300: #73c0a6;
  --color-success-400: #44ab88;
  --color-success-500: #15966a;
  --color-success-600: #117855;
  --color-success-700: #0d5a40;
  --color-success-800: #083c2a;
  --color-success-900: #020f0b;

  --color-info-50: #e8f4fa;
  --color-info-100: #d0e9f5;
  --color-info-200: #a2d2ea;
  --color-info-300: #73bce0;
  --color-info-400: #45a5d5;
  --color-info-500: #1272a2;
  --color-info-600: #0d567a;
  --color-info-700: #093951;
  --color-info-800: #093951;
  --color-info-900: #020e14;

  --color-warning-50: #fffaeb;
  --color-warning-100: #fff4d8;
  --color-warning-200: #ffeab0;
  --color-warning-300: #ffdf89;
  --color-warning-400: #ffd561;
  --color-warning-500: #ffca3a;
  --color-warning-600: #cca22e;
  --color-warning-700: #997923;
  --color-warning-800: #665117;
  --color-warning-900: #1a1406;

  /* Banner / collection tile backgrounds */
  --color-banner-orange-50: #fef6f0;
  --color-banner-orange-100: #feeee1;
  --color-banner-orange-200: #fdddc3;
  --color-banner-orange-300: #fccca4;
  --color-banner-orange-400: #fbbb86;
  --color-banner-orange-500: #faaa68;
  --color-banner-orange-600: #c88853;
  --color-banner-orange-700: #96663e;
  --color-banner-orange-800: #64442a;
  --color-banner-orange-900: #19110a;

  --color-banner-yellow-50: #fdfbf5;
  --color-banner-yellow-100: #fbf6ec;
  --color-banner-yellow-200: #f6edd9;
  --color-banner-yellow-300: #f2e5c6;
  --color-banner-yellow-400: #eddcb3;
  --color-banner-yellow-500: #baa980;
  --color-banner-yellow-600: #8c7f60;
  --color-banner-yellow-700: #5d5440;
  --color-banner-yellow-800: #2f2a20;
  --color-banner-yellow-900: #171510;

  --color-banner-blue-50: #eff6f7;
  --color-banner-blue-100: #dfeeef;
  --color-banner-blue-200: #c0dddf;
  --color-banner-blue-300: #a0cccf;
  --color-banner-blue-400: #81bbbf;
  --color-banner-blue-500: #4e888c;
  --color-banner-blue-600: #4e888c;
  --color-banner-blue-700: #3a6669;
  --color-banner-blue-800: #274446;
  --color-banner-blue-900: #132223;

  --color-page-50: #fffefd;
  --color-page-100: #fffefc;
  --color-page-200: #fffdfa;
  --color-page-300: #fffdfa;
  --color-page-400: #fffcf7;
  --color-page-500: #cccac6;
  --color-page-600: #999794;
  --color-page-700: #666563;
  --color-page-800: #333231;
  --color-page-900: #1a1919;

  --color-section-50: #fefdfc;
  --color-section-100: #fdfcfa;
  --color-section-200: #fcf9f5;
  --color-section-300: #faf6ef;
  --color-section-400: #f9f3ea;
  --color-section-500: #f7f0e5;
  --color-section-600: #c6c0b7;
  --color-section-700: #949089;
  --color-section-800: #31302e;
  --color-section-900: #191817;

  /* Accent tiles (Figma "Accents") */
  --color-accent-purple: #cb30e0;
  --color-accent-blue: #0088ff;
  --color-accent-red: #ff383c;

  /* ---- Semantic roles -------------------------------------------------- */
  --color-brand: var(--color-primary-500);
  --color-brand-hover: var(--color-primary-600);
  --color-brand-active: var(--color-primary-700);
  --color-brand-subtle: var(--color-primary-0);
  --color-on-brand: var(--color-white);

  --color-secondary: var(--color-secondary-500);
  --color-secondary-hover: var(--color-secondary-600);
  --color-on-secondary: var(--color-white);

  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-700);
  --color-text-tertiary: var(--color-gray-500);
  --color-text-disabled: var(--color-gray-300);
  --color-text-muted: #3e434e;
  --color-text-inverse: var(--color-white);
  --color-text-blue: var(--color-secondary-900);
  --color-text-blue-secondary: var(--color-secondary-700);

  --color-border-default: var(--color-gray-300);
  --color-border-subtle: var(--color-gray-200);
  --color-border-disabled: var(--color-gray-100);
  --color-border-light: var(--color-gray-50);
  --color-border-warm: #e0d9d1; /* Figma bc/400 (stepper outline) */

  --color-surface-page: var(--color-page-50);
  --color-surface-card: var(--color-white);
  --color-surface-section: var(--color-section-200);

  --color-status-error: var(--color-error-500);
  --color-status-success: var(--color-success-500);
  --color-status-info: var(--color-info-500);
  --color-status-warning: var(--color-warning-500);

  --color-focus: var(--color-secondary-500);

  /* One-off design values (no Figma variable; used by several components) */
  --color-text-heading: #10232b;
  --color-carousel-dot: #999;
  --color-carousel-dot-active: #09094a;

  /* ---- Typography ------------------------------------------------------ */
  /* @font-face declarations: assets/fonts/fonts.css (FaNum builds). */
  --font-family-body: "IRANYekanX", Tahoma, Arial, sans-serif;
  --font-family-title: "Kalameh", var(--font-family-body);
  --font-family-caption: "Yekan Bakh FaNum", var(--font-family-body);
  /* The webfonts draw every digit as Persian; Latin strings (emails, URLs,
     numbers the design shows in Latin) need a font with Latin digits. */
  --font-family-latin: system-ui, "Segoe UI", Roboto, Arial, sans-serif;

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

  /* size / line-height pairs (Figma text styles) */
  --font-size-xs: 0.75rem;    /* 12 · Body/s, Caption/s */
  --line-height-xs: 1.125rem; /* 18 */
  --font-size-s: 0.875rem;    /* 14 · Body/m */
  --line-height-s: 1.375rem;  /* 22 */
  --font-size-m: 1rem;        /* 16 · Body/lg */
  --line-height-m: 1.625rem;  /* 26 */
  --font-size-l: 1.125rem;    /* 18 · Body/xl */
  --line-height-l: 1.75rem;   /* 28 */
  --font-size-xl: 1.25rem;    /* 20 · Heading/xs */
  --line-height-xl: 2rem;     /* 32 */
  --font-size-2xl: 1.5rem;    /* 24 · Heading/s */
  --line-height-2xl: 2.25rem; /* 36 */
  --font-size-3xl: 2rem;      /* 32 */
  --line-height-3xl: 2.75rem; /* 44 · Heading/m */
  --font-size-4xl: 2.5rem;    /* 40 · Heading/lg */
  --line-height-4xl: 3.25rem; /* 52 */
  --font-size-display: 3rem;  /* 48 · Display/48 */
  --line-height-display: 3.5rem; /* 56 */

  /* ---- Spacing (Figma padding-1…5, gap-1…2; larger steps are multiples) */
  --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-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */

  /* ---- Layout ---------------------------------------------------------- */
  /* 1440 frame, 1280 column: the gutter reaches 80px at 1440 wide. */
  --container-max: 90rem;
  --container-gutter: clamp(1rem, 5.5vw, 5rem);

  /* ---- Shape ----------------------------------------------------------- */
  --radius-sm: 0.25rem; /* 4 */
  --radius-md: 0.75rem; /* 12 · rounded-xl */
  --radius-lg: 1rem;    /* 16 · rounded-2xl */
  --radius-xl: 1.5rem;  /* 24 · cards, panels, hero */
  --radius-full: 999px;

  /* ---- Elevation ------------------------------------------------------- */
  --shadow-sm: 0 1px 2px -1px rgb(0 0 0 / 10%), 0 1px 3px 0 rgb(0 0 0 / 10%);
  --shadow-primary-sm: 0 2px 6px 0 rgb(115 103 240 / 30%);
  --shadow-secondary-sm: 0 2px 6px 0 rgb(128 131 144 / 30%);
  --shadow-header: 0 4px 2px rgb(0 0 0 / 8%);
  --shadow-footer: 0 -4px 2px rgb(0 0 0 / 8%);
  --shadow-panel: -4px -4px 2px rgb(0 0 0 / 8%), 4px 4px 2px rgb(0 0 0 / 8%);
  --shadow-card-soft: 4px 4px 2px rgb(0 0 0 / 4%);
  --shadow-float: 0 4px 4px rgb(0 0 0 / 8%);
  --shadow-chip: 2px 2px 4.45px rgb(0 0 0 / 8%);

  /* ---- Motion and stacking --------------------------------------------- */
  --duration-fast: 150ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --z-header: 100;
  --z-sheet: 200;
}