/* =====================================================================================================
   Shans Corporation design system: tokens
   Every colour, size, space, radius, border, shadow and layer on the site comes from this file.
   Load it first (before site.css). Component CSS uses var(--…) only; raw values belong here.
   Reference page: design-system.html. Rules of use: DESIGN-SYSTEM.md.
   ===================================================================================================== */

:root {
  /* ---------- Colour: primitives (never use directly in components; use the roles below) ---------- */
  --orange-50: #fbf1ec;
  --orange-100: #fde7df;
  --orange-200: #ffd6c7;
  --orange-300: #ffa08a;
  --orange-400: #f26b47;          /* orange on navy (dark sections) */
  --orange-500: #eb4d25;          /* brand orange */
  --orange-600: #d2401b;          /* brand orange, deep: buttons and small text on white (4.7:1) */
  --orange-700: #b23715;          /* pressed / hover on orange */

  --navy-600: #1d3254;
  --navy-700: #16294a;
  --navy-800: #0e1d33;            /* brand navy */
  --navy-900: #0a1729;
  --navy-950: #060c16;

  --slate-900: #0d1a2b;           /* ink */
  --slate-700: #33415a;
  --slate-500: #5a6779;
  --slate-400: #6b7686;
  --slate-300: #b9c2ce;
  --slate-200: #dde2e9;
  --slate-100: #eceff3;
  --slate-50:  #f4f6f8;
  --slate-25:  #fbfcfd;
  --white: #ffffff;
  --black: #000000;

  --mist-100: #eef2f7;            /* text on navy */
  --mist-300: #c4cddb;
  --mist-500: #95a3b6;

  --sand-50:  #f1ede8;            /* warm neutrals for product photography cards */
  --sand-200: #e6e1dc;
  --sand-400: #8a827b;
  --sand-500: #6b645e;
  --sand-600: #5b5550;
  --sand-700: #3b3530;
  --sand-800: #2a241f;
  --sand-900: #1c1712;
  --sand-950: #14110e;

  --graphite-500: #646b74;        /* cool darks for product card gradients */
  --graphite-600: #4b5159;
  --graphite-700: #3a4048;
  --graphite-800: #2c3137;
  --graphite-850: #2a2e34;
  --graphite-900: #23272d;

  --red-50: #fdecea;    --red-600: #b42318;
  --green-50: #e3f4ea;  --green-600: #1f9d55;  --green-700: #198a49;
  --amber-500: #f5a524;
  --blue-400: #5b8fd9;

  /* RGB channels, for translucent colour: rgb(var(--c-white) / .14). Alpha steps used on the site:
     0 .04 .07 .1 .14 .2 .28 .35 .45 .55 .65 .75 .86 .95 1 */
  --c-white: 255 255 255;
  --c-black: 0 0 0;
  --c-ink: 13 26 43;
  --c-navy: 14 29 51;
  --c-scrim: 7 13 22;
  --c-accent: 235 77 37;
  --c-accent-strong: 210 64 27;
  --c-accent-hover: 178 55 21;
  --c-orange-400: 242 107 71;
  --c-peach: 255 140 105;
  --c-sand: 18 13 9;              /* warm scrim over product photography */
  --c-danger: 180 35 24;
  --c-green: 31 157 85;
  --c-amber: 245 165 36;
  --c-blue: 37 70 125;

  /* ---------- Colour: roles (what components use) ---------- */
  --bg: var(--slate-50);          /* page ground, shade A */
  --bg-2: var(--slate-25);        /* page ground, shade B (alternates with A) */
  --surface: var(--white);        /* cards, fields, panels */
  --surface-2: var(--slate-100);  /* sunken / hover fill */
  --ink: var(--slate-900);        /* headings, body text */
  --ink-2: var(--slate-700);      /* secondary text */
  --muted: var(--slate-500);      /* captions, meta */
  --placeholder: var(--slate-400);
  --line: var(--slate-200);       /* hairlines and card edges */
  --line-strong: var(--slate-300);/* field borders */
  --accent: var(--orange-500);
  --accent-strong: var(--orange-600);
  --accent-hover: var(--orange-700);
  --accent-soft: var(--orange-100);
  --on-accent: var(--white);
  --navy: var(--navy-800);
  --navy-2: var(--navy-700);
  --secondary: var(--navy-800);
  --secondary-soft: var(--slate-100);
  --danger: var(--red-600);       --danger-soft: var(--red-50);
  --success: var(--green-600);    --success-soft: var(--green-50);
  --whatsapp: var(--green-600);   --whatsapp-hover: var(--green-700);
  --warning: var(--amber-500);

  /* ---------- Typography ---------- */
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  /* fixed steps: UI text, labels, card copy */
  --fs-3xs: 11px;
  --fs-2xs: 12px;                 /* mono eyebrows, tags */
  --fs-xs: 13px;                  /* captions, meta */
  --fs-sm: 14px;                  /* small body, buttons */
  --fs-md: 15px;                  /* card body */
  --fs-base: 16px;                /* body */
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 22px;
  --fs-3xl: 24px;
  --fs-4xl: 28px;
  --fs-5xl: 32px;
  --fs-6xl: 40px;
  --fs-7xl: 48px;

  /* fluid roles: headings scale with the viewport between a floor and a ceiling */
  --fs-display: clamp(2.4rem, 4.5vw, 4.2rem);   /* page hero titles */
  --fs-h1: clamp(2.2rem, 3.6vw, 3.5rem);        /* hero titles that share space with a side panel */
  --fs-h2: clamp(2rem, 3.4vw, 3.1rem);          /* section titles */
  --fs-h3: clamp(1.5rem, 2.4vw, 2.25rem);       /* sub-sections, statements, quotes */
  --fs-h4: clamp(1.3rem, 1.9vw, 1.8rem);        /* large card titles */
  --fs-h5: clamp(1.1rem, 1.35vw, 1.3rem);       /* card titles, list headings */
  --fs-lead: clamp(1.05rem, 1.3vw, 1.2rem);     /* intro paragraphs */
  --fs-stat: clamp(2.6rem, 4.6vw, 4.4rem);      /* big figures */
  --fs-tab: clamp(var(--fs-2xl), 1.6vw, var(--fs-4xl)); /* order box category line: 28px, smaller only so the whole line fits */

  --lh-none: 1;
  --lh-tight: 1.1;                /* display and section titles */
  --lh-snug: 1.2;
  --lh-heading: 1.35;             /* statements, small headings */
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;             /* body copy */

  --tracking-tightest: -.045em;   /* display, big figures */
  --tracking-tighter: -.035em;    /* section titles */
  --tracking-tight: -.02em;       /* card titles, statements */
  --tracking-snug: -.01em;
  --tracking-normal: 0;
  --tracking-slight: .02em;
  --tracking-wide: .06em;
  --tracking-wider: .1em;
  --tracking-widest: .14em;       /* mono eyebrows */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-book: 450;
  --fw-medium: 500;
  --fw-strong: 550;               /* labels, nav, buttons */
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* ---------- Space: a 4px grid with 2/6/10/14 half-steps for tight UI ---------- */
  --sp-2: 2px;   --sp-4: 4px;   --sp-6: 6px;   --sp-8: 8px;   --sp-10: 10px;  --sp-12: 12px;
  --sp-14: 14px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-28: 28px;  --sp-32: 32px;
  --sp-40: 40px; --sp-48: 48px; --sp-56: 56px; --sp-64: 64px; --sp-80: 80px;  --sp-96: 96px; --sp-120: 120px;

  /* section rhythm (vertical padding of page sections) */
  --section-y: clamp(44px, 4.8vw, 72px);          /* regular sections (the homepage rhythm) */
  --section-y-tight: clamp(32px, 3.6vw, 52px);    /* compact bands: logos, small CTAs */
  --section-y-feature: clamp(56px, 6vw, 96px);    /* full-bleed feature bands (dark, pinned) */

  /* ---------- Layout ---------- */
  --container-max: 1320px;                       /* legacy max width, used where --wrap is not overridden */
  --gutter-wide: clamp(16px, 10vw, 320px);       /* page side margin on desktop (80% content width) */
  --gutter-narrow: clamp(16px, 4.1vw, 96px);     /* page side margin up to 900px */
  --header-h: 72px;

  /* ---------- Shape ---------- */
  /* Content blocks (sections, cards, media, fields) are square. Floating UI (menus, overlays) is rounded.
     Controls (buttons, chips, nav links, badges) are pills. Dots and avatars are round. */
  --radius-none: 0;
  --radius-xs: 3px;               /* tiny marks */
  --radius-md: 10px;              /* items inside floating UI, small icon tiles */
  --radius-lg: 16px;              /* floating UI: menus, hero glass cards */
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-round: 50%;

  --border-width: 1px;
  --border: var(--border-width) solid var(--line);
  --border-strong: var(--border-width) solid var(--line-strong);
  --border-accent: 2px solid var(--accent);

  /* ---------- Elevation ---------- */
  --shadow-sm: 0 1px 2px rgb(var(--c-ink) / .04);
  --shadow: 0 1px 2px rgb(var(--c-ink) / .07), 0 12px 32px -12px rgb(var(--c-ink) / .14);
  --shadow-lg: 0 30px 60px -36px rgb(var(--c-ink) / .45);
  --shadow-xl: 0 30px 60px -30px rgb(var(--c-scrim) / .55);
  --ring: 0 0 0 3px rgb(var(--c-accent) / .28);  /* focus ring on fields */

  /* ---------- Layers ---------- */
  --z-header: 40;
  --z-menu: 41;
  --z-progress: 45;
  --z-drawer: 60;
  --z-lightbox: 70;
  --z-toast: 80;
  --z-grain: 85;
  --z-skip: 90;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: .2s;
  --dur: .35s;
  --dur-slow: .6s;

  /* legacy names kept so older rules keep working */
  --radius: var(--radius-lg);
  --radius-sm: var(--radius-md);
  --wrap: var(--container-max);
  --gutter: clamp(16px, 4vw, 40px);

  color-scheme: light;
}