/* The Chance storefront - design tokens (v1)
   Source of truth for every colour, size, radius, shadow and motion value on the customer side.
   Rule: templates and components reference these variables; raw hex / px literals are not allowed outside this file. */

@layer tokens {
  :root {
    /* ---- Colour: ink (brand dark) ---- */
    --ink-900: #0F1B33;   /* brand surfaces, primary text */
    --ink-800: #17274A;
    --ink-700: #243659;
    --ink-300: #A9B3C9;   /* secondary text on ink */

    /* ---- Colour: accent (one only) ---- */
    --accent-500: #E8650A;  /* fills, icons, large UI. White on it = 3.3:1 (icons/large only); ink on it = 5.1:1 */
    --accent-600: #C9550A;  /* pressed */
    --accent-700: #B8470A;  /* accent text on light surfaces (5.3:1) and white-text fills */
    --accent-100: #FDEBDD;  /* tinted backgrounds */

    /* ---- Colour: neutrals (cool) ---- */
    --bg: #F5F6FA;          /* app background */
    --surface: #FFFFFF;     /* cards, sheets, bars */
    --white: #FFFFFF;       /* text/icons on ink or accent fills */
    --surface-2: #ECEEF4;   /* image tiles, inputs, chips (idle) */
    --surface-3: #F8F9FC;   /* skeleton highlight */
    --line: #E3E6EE;        /* hairlines (use sparingly) */
    --text: var(--ink-900);
    --text-2: #4A5672;      /* secondary 7.3:1 on white */
    --text-3: #66718A;      /* tertiary 4.9:1 on white - never below 13px */

    /* ---- Colour: semantic ---- */
    --success: #1F7A45;  --success-100: #E3F4EA;
    --warning: #9A5B00;  --warning-100: #FFF1D6;
    --danger:  #C23A3A;  --danger-100:  #FCE6E6;
    --info:    #2557C7;  --info-100:    #E4ECFC;

    /* ---- Category tile tints (category tiles only) ---- */
    --tint-peach: #FFE7D6; --tint-sage: #E4F0E2; --tint-sky: #DCEBFA; --tint-butter: #FFF2C7; --tint-lilac: #ECE4F7;

    /* ---- Radius: ONE scale ---- */
    --r-sm: 10px;    /* inputs' inner elements, small icon buttons */
    --r-md: 14px;    /* image tiles, thumbnails */
    --r-lg: 20px;    /* cards, panels */
    --r-xl: 28px;    /* sheets (top corners), hero surfaces */
    --r-full: 999px; /* buttons, chips, tab bar, badges, steppers */

    /* ---- Spacing (4px base) ---- */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-14: 56px;
    --gutter: var(--s-4);

    /* ---- Type ---- */
    --font: "Manrope", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fs-caption: 0.75rem;   /* 12 */
    --fs-small: 0.8125rem;   /* 13 */
    --fs-body: 0.9375rem;    /* 15 */
    --fs-input: 1rem;        /* 16: prevents iOS zoom */
    --fs-headline: 1.125rem; /* 18 */
    --fs-title: 1.375rem;    /* 22 */
    --fs-display: 1.75rem;   /* 28 */
    --lh-tight: 1.2; --lh-snug: 1.35; --lh-body: 1.5;

    /* ---- Elevation (navy-tinted, never pure black) ---- */
    --e-1: 0 1px 2px rgb(15 27 51 / .06), 0 4px 12px rgb(15 27 51 / .05);
    --e-2: 0 8px 24px rgb(15 27 51 / .10);
    --e-3: 0 -8px 32px rgb(15 27 51 / .14);   /* sheets */
    --e-nav: 0 10px 30px rgb(15 27 51 / .28); /* floating tab bar */

    /* ---- Motion ---- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    /* iOS-like spring (damped overshoot). Falls back to --ease-out where linear() is unsupported. */
    --spring: cubic-bezier(0.2, 0.9, 0.25, 1.15);
    --spring-soft: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-4: 520ms;  /* hero entrances only */
    --dur-1: 120ms;  /* press, hover */
    --dur-2: 220ms;  /* small state changes */
    --dur-3: 360ms;  /* sheets, page transitions */

    /* ---- Layout ---- */
    --appbar-h: 56px;
    --tabbar-h: 64px;
    --fab-lift: 28px;
    /* tab bar centre piece: pill top edge dips into a circular notch with soft (filleted) shoulders; 112 x 64, ink fill */
    --tab-notch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='64' viewBox='0 0 112 64'%3E%3Cpath fill='%230F1B33' d='M0 0H8A8 8.5 0 0 1 15.2 5.2A41 41 0 0 0 96.8 5.2A8 8.5 0 0 1 104 0H112V64H0Z'/%3E%3C/svg%3E");                  /* how far the centre Cart button rises above the tab bar */
    --tap: 44px;                       /* minimum touch target */
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);
    --content-max: 1280px;

    /* ---- Z-index scale (the only allowed values) ---- */
    /* local stacking inside one component (never compared across components) */
    --l-under: -1; --l-1: 1; --l-2: 2; --l-3: 3; --l-4: 4;
    --z-sticky: 10; --z-appbar: 20; --z-tabbar: 30; --z-sheet: 40; --z-modal: 50; --z-toast: 60;
  }

  @supports (transition-timing-function: linear(0, 1)) {
    :root {
      --spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12%, 0.938 16.6%, 1.017 21%, 1.043 24.4%,
                       1.049 27.8%, 1.033 33.1%, 1.008 40.2%, 0.998 47.2%, 1.001 58%, 1);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :root { --dur-1: 0.01ms; --dur-2: 0.01ms; --dur-3: 0.01ms; }
  }
}