/* ============================================================
   Coolblue design tokens
   Mirrored verbatim from the Coolblue Design System project
   (tokens/colors · typography · spacing · radius · elevation · motion).
   Do not hand-tune values here — change them in the design system.
   ============================================================ */

:root{
/* ---- Brand base ---- */
--cb-blue-50:#e8f5fd;--cb-blue-100:#cfeafb;--cb-blue-200:#9ed4f5;--cb-blue-300:#66bdee;--cb-blue-400:#2ba6e9;
--cb-blue-500:#0090e3;--cb-blue-600:#007cc4;--cb-blue-700:#0066a2;--cb-blue-800:#005084;--cb-blue-900:#003a61;
--cb-orange-50:#fff2e8;--cb-orange-100:#ffe0cc;--cb-orange-300:#ffab70;--cb-orange-500:#ff6501;--cb-orange-600:#e35700;--cb-orange-700:#bf4900;
--cb-navy-400:#4b7cc7;--cb-navy-500:#2a5cad;--cb-navy-600:#224c90;--cb-navy-700:#1a3c72;
/* ---- Neutrals ---- */
--cb-white:#ffffff;--cb-grey-50:#f7f7f7;--cb-grey-100:#f0f0f0;--cb-grey-200:#e3e3e3;--cb-grey-300:#cccccc;
--cb-grey-400:#999999;--cb-grey-500:#767676;--cb-grey-600:#5a5a5a;--cb-grey-700:#444444;--cb-grey-900:#0d1011;
/* ---- Semantic hues ---- */
--cb-green-50:#e9f6ec;--cb-green-500:#0b8a2e;--cb-green-600:#097325;
--cb-red-50:#fdecee;--cb-red-500:#d0021b;--cb-red-600:#ad0116;
--cb-yellow-100:#fff6d6;--cb-yellow-400:#ffc700;

/* ---- Semantic aliases ---- */
--surface-page:var(--cb-grey-100);
--surface-card:var(--cb-white);
--surface-raised:var(--cb-white);
--surface-sunken:var(--cb-grey-50);
--surface-brand:var(--cb-blue-500);
--surface-brand-soft:var(--cb-blue-50);
--surface-accent:var(--cb-orange-500);
--surface-accent-soft:var(--cb-orange-50);
--surface-inverse:var(--cb-grey-900);

--text-body:var(--cb-grey-900);
--text-muted:var(--cb-grey-500);
--text-subtle:var(--cb-grey-400);
--text-inverse:var(--cb-white);
--text-link:var(--cb-blue-600);
--text-link-hover:var(--cb-blue-800);
--text-heading:var(--cb-grey-900);
--text-heading-brand:var(--cb-navy-500);
--text-price:var(--cb-grey-900);
--text-discount:var(--cb-red-500);
--text-success:var(--cb-green-500);

--border-subtle:var(--cb-grey-200);
--border-default:var(--cb-grey-300);
--border-strong:var(--cb-grey-400);
--border-focus:var(--cb-blue-500);

--action-primary-bg:var(--cb-orange-500);
--action-primary-bg-hover:var(--cb-orange-600);
--action-primary-bg-active:var(--cb-orange-700);
--action-primary-text:var(--cb-white);
--action-secondary-bg:var(--cb-blue-500);
--action-secondary-bg-hover:var(--cb-blue-600);
--action-secondary-bg-active:var(--cb-blue-700);
--action-secondary-text:var(--cb-white);
--action-quiet-text:var(--cb-blue-600);

--rating-star:var(--cb-blue-500);
--rating-star-empty:var(--cb-grey-300);
--delivery-ok:var(--cb-green-500);

/* ---- Type ---- */
--font-sans:"Nunito Sans","Avenir Next","Avenir",-apple-system,"Segoe UI",sans-serif;
--font-slab:"Bitter","Dobra Slab",Georgia,serif;
--font-display:var(--font-sans);
--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

--fw-regular:400;--fw-semibold:600;--fw-bold:700;--fw-extrabold:800;--fw-black:900;

--fs-3xs:11px;--fs-2xs:12px;--fs-xs:13px;--fs-sm:14px;--fs-md:16px;--fs-lg:18px;
--fs-xl:20px;--fs-2xl:24px;--fs-3xl:30px;--fs-4xl:38px;--fs-5xl:48px;--fs-6xl:64px;

--lh-tight:1.05;--lh-snug:1.2;--lh-normal:1.45;--lh-relaxed:1.6;
--ls-display:-0.02em;--ls-tight:-0.01em;--ls-normal:0;--ls-caps:0.02em;

/* ---- Spacing ---- */
--space-0:0;--space-1:2px;--space-2:4px;--space-3:8px;--space-4:12px;--space-5:16px;--space-6:20px;
--space-7:24px;--space-8:32px;--space-9:40px;--space-10:48px;--space-11:64px;--space-12:80px;--space-13:96px;
--gutter:16px;--gutter-lg:24px;
--control-h-sm:32px;--control-h-md:40px;--control-h-lg:48px;
--tap-min:44px;

/* ---- Radius ---- */
--radius-none:0;--radius-xs:3px;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-xl:12px;
--radius-pill:999px;--radius-circle:50%;
--radius-button:var(--radius-sm);
--radius-card:var(--radius-lg);
--radius-input:var(--radius-sm);
--radius-badge:var(--radius-xs);

/* ---- Elevation ---- */
--shadow-none:none;
--shadow-xs:0 1px 2px rgba(13,16,17,.08);
--shadow-sm:0 1px 3px rgba(13,16,17,.12);
--shadow-md:0 2px 8px rgba(13,16,17,.12);
--shadow-lg:0 6px 20px rgba(13,16,17,.16);
--shadow-overlay:0 12px 40px rgba(13,16,17,.24);
--shadow-focus:0 0 0 3px var(--cb-blue-200);
--elevation-card:var(--shadow-sm);
--elevation-card-hover:var(--shadow-md);
--elevation-menu:var(--shadow-lg);
--elevation-modal:var(--shadow-overlay);

/* ---- Motion ---- */
--ease-standard:cubic-bezier(.4,0,.2,1);
--ease-out:cubic-bezier(0,0,.2,1);
--ease-in:cubic-bezier(.4,0,1,1);
--duration-instant:80ms;
--duration-fast:120ms;
--duration-normal:200ms;
--duration-slow:320ms;
--transition-control:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard);
--transition-card:box-shadow var(--duration-normal) var(--ease-out);
}