/**
 * Nick Kids — Design Tokens
 * =========================
 * The single source of truth for every value in the UI.
 * Documented in DESIGN_SYSTEM.md. Do not hardcode a value that exists here,
 * and do not add a token without documenting it in DESIGN_SYSTEM.md.
 *
 * Naming: --nk-<group>-<role>-<modifier>
 */

:root {
  /* ---------------------------------------------------------------------
   * 1. COLOR — RAW PALETTE
   * Raw ramps. Components must NOT consume these directly; they consume
   * the semantic tokens in section 2. Raw values exist so the semantic
   * layer can be re-pointed without touching components.
   * ------------------------------------------------------------------- */

  /* Cream — page grounds and warm surfaces */
  --nk-cream-50:  #fefdfb;
  --nk-cream-100: #fdfaf5;
  --nk-cream-200: #f9f3ea;
  --nk-cream-300: #f2e9db;
  --nk-cream-400: #e8dbc7;

  /* Navy — primary UI colour, text, structure */
  --nk-navy-50:  #f4f6f9;
  --nk-navy-100: #e6ebf2;
  --nk-navy-200: #c6d1e0;
  --nk-navy-300: #9aabc4;
  --nk-navy-400: #6b7f9f;
  --nk-navy-500: #47597a;
  --nk-navy-600: #33455f;
  --nk-navy-700: #24334a;
  --nk-navy-800: #182339;
  --nk-navy-900: #101a2c;

  /* Coral — the accent. Primary CTA + Brand Heart share this hue. */
  --nk-coral-50:  #fff5f2;
  --nk-coral-100: #ffe6df;
  --nk-coral-200: #ffc9ba;
  --nk-coral-300: #ffa48b;
  --nk-coral-400: #fb7f5f;
  --nk-coral-500: #f2603c; /* ← brand accent */
  --nk-coral-600: #dc4b28;
  --nk-coral-700: #b73a1c;
  --nk-coral-800: #93301a;
  --nk-coral-900: #782b1a;

  /* Soft pastel secondaries — sparing use: category chips, editorial blocks.
   * Never for CTAs, never more than one pastel per viewport section. */
  --nk-pastel-sky:    #dcecf5;
  --nk-pastel-mint:   #dcefe4;
  --nk-pastel-butter: #fbeed2;
  --nk-pastel-lilac:  #e7e2f3;
  --nk-pastel-blush:  #f9e2e2;

  /* Functional — status only, never decorative */
  --nk-green-50:  #edf7f0;
  --nk-green-500: #2f8f56;
  --nk-green-700: #216c3f;
  --nk-amber-50:  #fdf4e3;
  --nk-amber-500: #c9871a;
  --nk-amber-700: #96630f;
  --nk-red-50:    #fdeceb;
  --nk-red-500:   #d13a2e;
  --nk-red-700:   #a12a20;

  --nk-white: #ffffff;
  --nk-black: #000000;

  /* ---------------------------------------------------------------------
   * 2. COLOR — SEMANTIC
   * This is what components consume.
   * ------------------------------------------------------------------- */

  /* Surfaces */
  --nk-surface-page:     var(--nk-cream-100);  /* the default page ground */
  --nk-surface-raised:   var(--nk-white);      /* cards, panels, dropdowns */
  --nk-surface-sunken:   var(--nk-cream-200);  /* wells, image placeholders */
  --nk-surface-inverse:  var(--nk-navy-800);   /* footer, dark banners */
  --nk-surface-accent:   var(--nk-coral-50);   /* soft accent wash */
  --nk-surface-overlay:  rgb(16 26 44 / 0.55); /* modal scrim */

  /* Text */
  --nk-text-strong:   var(--nk-navy-900); /* headings */
  --nk-text-default:  var(--nk-navy-700); /* body */
  --nk-text-muted:    var(--nk-navy-500); /* secondary, meta */
  /* navy-450: navy-400 is only 3.91:1 on cream, and placeholder text must
   * still meet AA. This sits at 4.86:1. */
  --nk-text-subtle:   #606f8c;
  --nk-text-inverse:  var(--nk-cream-100);
  /* coral-700, not 600: on the cream ground coral-600 measures 3.97:1, which
   * fails AA for body-size text. coral-700 measures 5.55:1. */
  --nk-text-accent:   var(--nk-coral-700);
  --nk-text-on-accent: var(--nk-white);

  /* Borders */
  --nk-border-subtle:  var(--nk-cream-400);
  --nk-border-default: var(--nk-navy-200);
  --nk-border-strong:  var(--nk-navy-400);
  --nk-border-accent:  var(--nk-coral-500);
  --nk-border-inverse: rgb(255 255 255 / 0.14);

  /* Interactive — primary (coral) */
  --nk-action-primary:          var(--nk-coral-500);
  --nk-action-primary-hover:    var(--nk-coral-600);
  --nk-action-primary-active:   var(--nk-coral-700);
  --nk-action-primary-subtle:   var(--nk-coral-50);

  /* Interactive — secondary (navy) */
  --nk-action-secondary:        var(--nk-navy-800);
  --nk-action-secondary-hover:  var(--nk-navy-900);
  --nk-action-secondary-active: var(--nk-navy-900);
  --nk-action-secondary-subtle: var(--nk-navy-50);

  /* Disabled */
  --nk-action-disabled-bg:   var(--nk-navy-100);
  --nk-action-disabled-text: var(--nk-navy-300);

  /* Status */
  --nk-status-success:    var(--nk-green-500);
  --nk-status-success-bg: var(--nk-green-50);
  --nk-status-success-text: var(--nk-green-700);
  --nk-status-warning:    var(--nk-amber-500);
  --nk-status-warning-bg: var(--nk-amber-50);
  --nk-status-warning-text: var(--nk-amber-700);
  --nk-status-danger:     var(--nk-red-500);
  --nk-status-danger-bg:  var(--nk-red-50);
  --nk-status-danger-text: var(--nk-red-700);
  --nk-status-info:       var(--nk-navy-500);
  --nk-status-info-bg:    var(--nk-navy-50);

  /* Brand Heart — see DESIGN_SYSTEM.md §3. One colour, one component. */
  --nk-heart-color: var(--nk-coral-500);
  --nk-heart-size-sm: 0.75em;
  --nk-heart-size-md: 0.875em;
  --nk-heart-size-lg: 1em;

  /* Focus ring — identical on every focusable element */
  --nk-focus-ring-color: var(--nk-coral-500);
  --nk-focus-ring-width: 3px;
  --nk-focus-ring-offset: 2px;

  /* ---------------------------------------------------------------------
   * 3. TYPOGRAPHY
   * ------------------------------------------------------------------- */

  /* IRANSans leads the UI stack; Vazirmatn is the shipped fallback and is
   * what actually renders until a licensed IRANSans is installed.
   * See DESIGN_SYSTEM.md §5 before changing these stacks. */
  --nk-font-ui: "IRANSansX", "IRANSans", "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
  --nk-font-display: "Vazirmatn", "IRANSansX", "IRANSans", "Segoe UI", Tahoma, sans-serif;
  --nk-font-numeric: "Vazirmatn", "IRANSansX", "Segoe UI", Tahoma, sans-serif;
  --nk-font-mono: ui-monospace, "Cascadia Code", "Fira Code", monospace;

  /* Type scale — mobile-first values; §6 fluid overrides apply at ≥768px.
   * 1rem = 16px. Persian needs a slightly larger base than Latin. */
  --nk-text-2xs: 0.6875rem; /* 11px — legal/footnote only */
  --nk-text-xs:  0.75rem;   /* 12px — badges, meta */
  --nk-text-sm:  0.8125rem; /* 13px — captions, helper text */
  --nk-text-base: 0.9375rem;/* 15px — secondary body */
  --nk-text-md:  1rem;      /* 16px — DEFAULT body, form inputs (iOS zoom floor) */
  --nk-text-lg:  1.125rem;  /* 18px — lead paragraphs */
  --nk-text-xl:  1.25rem;   /* 20px — h5 / card titles */
  --nk-text-2xl: 1.5rem;    /* 24px — h4 */
  --nk-text-3xl: 1.75rem;   /* 28px — h3 */
  --nk-text-4xl: 2rem;      /* 32px — h2 */
  --nk-text-5xl: 2.5rem;    /* 40px — h1 */
  --nk-text-6xl: 3rem;      /* 48px — hero, desktop only */

  /* Weights — Vazirmatn variable supports 100–900; we use four. */
  --nk-weight-regular: 400;
  --nk-weight-medium: 500;
  --nk-weight-semibold: 600;
  --nk-weight-bold: 700;

  /* Line heights — Persian ascenders/descenders need more room than Latin */
  --nk-leading-none: 1;
  --nk-leading-tight: 1.35;   /* large headings */
  --nk-leading-snug: 1.55;    /* small headings, UI labels */
  --nk-leading-normal: 1.75;  /* body — Persian comfortable reading */
  --nk-leading-relaxed: 2;    /* long-form description blocks */

  /* Letter spacing — Persian is cursive: NEVER positive-track Persian text.
   * These apply to Latin/numeric runs only. */
  --nk-tracking-tight: -0.01em;
  --nk-tracking-normal: 0;
  --nk-tracking-latin-wide: 0.02em;

  /* ---------------------------------------------------------------------
   * 4. SPACING — 4px base grid
   * ------------------------------------------------------------------- */
  --nk-space-0: 0;
  /* Sub-grid optical gaps. These exist ONLY for hairline separations that
   * would look wrong at 4px — icon-to-icon in a star row, icon-to-label in
   * the bottom nav. Do not use them for layout spacing. */
  --nk-space-hair: 1px;
  --nk-space-half: 2px;
  --nk-space-1: 0.25rem;  /* 4  */
  --nk-space-2: 0.5rem;   /* 8  */
  --nk-space-3: 0.75rem;  /* 12 */
  --nk-space-4: 1rem;     /* 16 */
  --nk-space-5: 1.25rem;  /* 20 */
  --nk-space-6: 1.5rem;   /* 24 */
  --nk-space-8: 2rem;     /* 32 */
  --nk-space-10: 2.5rem;  /* 40 */
  --nk-space-12: 3rem;    /* 48 */
  --nk-space-16: 4rem;    /* 64 */
  --nk-space-20: 5rem;    /* 80 */
  --nk-space-24: 6rem;    /* 96 */

  /* Section rhythm — vertical space between page sections */
  --nk-section-gap: var(--nk-space-10);      /* mobile */
  --nk-section-gap-lg: var(--nk-space-16);   /* ≥768px, set in §6 */

  /* ---------------------------------------------------------------------
   * 5. LAYOUT
   * ------------------------------------------------------------------- */
  --nk-container-max: 1280px;
  --nk-container-narrow: 768px;   /* article / checkout column */
  --nk-container-wide: 1440px;    /* full-bleed editorial */
  --nk-gutter: var(--nk-space-4); /* mobile gutter; grows in §6 */
  --nk-grid-gap: var(--nk-space-4);

  /* ---------------------------------------------------------------------
   * 6. RADIUS
   * Soft but not bubbly — premium-friendly, not cartoonish.
   * ------------------------------------------------------------------- */
  --nk-radius-none: 0;
  --nk-radius-xs: 4px;
  --nk-radius-sm: 8px;    /* badges, chips, small inputs */
  --nk-radius-md: 12px;   /* buttons, inputs */
  --nk-radius-lg: 16px;   /* cards */
  --nk-radius-xl: 24px;   /* media, promo panels, sheets */
  --nk-radius-2xl: 32px;  /* hero blocks */
  --nk-radius-pill: 999px;/* pills, avatars, icon buttons */
  --nk-radius-circle: 50%;

  /* ---------------------------------------------------------------------
   * 7. SHADOWS — warm-tinted (navy, never neutral black)
   * ------------------------------------------------------------------- */
  --nk-shadow-xs: 0 1px 2px rgb(16 26 44 / 0.05);
  --nk-shadow-sm: 0 2px 8px rgb(16 26 44 / 0.06);
  --nk-shadow-md: 0 6px 20px rgb(16 26 44 / 0.08);
  --nk-shadow-lg: 0 14px 40px rgb(16 26 44 / 0.10);
  --nk-shadow-xl: 0 24px 60px rgb(16 26 44 / 0.14);
  --nk-shadow-accent: 0 8px 24px rgb(242 96 60 / 0.28); /* primary CTA only */
  --nk-shadow-inset: inset 0 1px 2px rgb(16 26 44 / 0.06);

  /* ---------------------------------------------------------------------
   * 8. BORDERS
   * ------------------------------------------------------------------- */
  --nk-border-width: 1px;
  --nk-border-width-thick: 2px;   /* selected states */
  --nk-border-hairline: 1px solid var(--nk-border-subtle);

  /* ---------------------------------------------------------------------
   * 9. MOTION
   * Calm and quick. Nothing bounces, nothing loops in the shopping path.
   * ------------------------------------------------------------------- */
  --nk-duration-instant: 80ms;
  --nk-duration-fast: 150ms;
  --nk-duration-normal: 250ms;
  --nk-duration-slow: 400ms;
  --nk-ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --nk-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --nk-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --nk-transition-base: var(--nk-duration-fast) var(--nk-ease-standard);

  /* ---------------------------------------------------------------------
   * 10. Z-INDEX — never invent a value outside this ladder
   * ------------------------------------------------------------------- */
  --nk-z-base: 0;
  --nk-z-raised: 10;
  --nk-z-sticky: 100;      /* sticky filter bars, sticky add-to-cart */
  --nk-z-header: 200;
  --nk-z-bottom-nav: 250;
  --nk-z-dropdown: 300;
  --nk-z-overlay: 400;     /* scrim */
  --nk-z-drawer: 450;      /* mobile nav, filter sheet */
  --nk-z-modal: 500;
  --nk-z-toast: 600;
  --nk-z-tooltip: 700;

  /* ---------------------------------------------------------------------
   * 11. TOUCH & SAFE AREA
   * ------------------------------------------------------------------- */
  --nk-touch-target: 44px;      /* absolute minimum, WCAG 2.5.5 */
  --nk-touch-target-lg: 48px;   /* preferred for primary actions */
  --nk-safe-top: env(safe-area-inset-top, 0px);
  --nk-safe-bottom: env(safe-area-inset-bottom, 0px);
  --nk-safe-inline-start: env(safe-area-inset-left, 0px);
  --nk-safe-inline-end: env(safe-area-inset-right, 0px);

  /* Fixed chrome heights — used to offset sticky elements */
  --nk-header-height: 56px;         /* mobile */
  --nk-header-height-lg: 80px;      /* ≥1024px */
  --nk-bottom-nav-height: 60px;

  /* ---------------------------------------------------------------------
   * 12. ICONS — see DESIGN_SYSTEM.md §6
   * ------------------------------------------------------------------- */
  --nk-icon-xs: 14px;
  --nk-icon-sm: 16px;
  --nk-icon-md: 20px;  /* DEFAULT */
  --nk-icon-lg: 24px;
  --nk-icon-xl: 32px;
  --nk-icon-stroke: 1.75;       /* default — slightly lighter than Lucide's 2 */
  --nk-icon-stroke-bold: 2.25;  /* selected/active nav only */

  /* ---------------------------------------------------------------------
   * 13. ASPECT RATIOS — product imagery is 3:4 portrait everywhere
   * ------------------------------------------------------------------- */
  --nk-ratio-product: 3 / 4;
  --nk-ratio-category: 4 / 5;
  --nk-ratio-banner: 16 / 9;
  --nk-ratio-banner-mobile: 4 / 3;
  --nk-ratio-square: 1 / 1;
}

/* -----------------------------------------------------------------------
 * RESPONSIVE TOKEN OVERRIDES
 * Only tokens change at breakpoints — components never redefine these.
 * Breakpoints (DESIGN_SYSTEM.md §7): xs 360 / sm 480 / md 768 / lg 1024 /
 * xl 1280 / 2xl 1536. Media queries are min-width, mobile-first.
 * --------------------------------------------------------------------- */

@media (min-width: 480px) {
  :root {
    --nk-gutter: var(--nk-space-5);
  }
}

@media (min-width: 768px) {
  :root {
    --nk-gutter: var(--nk-space-6);
    --nk-grid-gap: var(--nk-space-6);
    --nk-section-gap: var(--nk-space-16);
    --nk-text-4xl: 2.25rem;
    --nk-text-5xl: 2.75rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --nk-gutter: var(--nk-space-8);
    --nk-header-height: var(--nk-header-height-lg);
    --nk-text-5xl: 3rem;
  }
}

@media (min-width: 1280px) {
  :root {
    --nk-section-gap: var(--nk-space-20);
  }
}

/* Users who ask for less motion get none of it. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --nk-duration-instant: 0ms;
    --nk-duration-fast: 0ms;
    --nk-duration-normal: 0ms;
    --nk-duration-slow: 0ms;
  }
}