/* ============================================================
   CeCe ce.. preț mic! — Design tokens
   Paleta e extrasa direct din logo: galben soare, negru cerneala,
   rosu panglica, verde camion, albastru ochi. Fundal alb, mereu.
   ============================================================ */

:root {
  /* ── Culori de marca ────────────────────────────────── */
  --sun-100: #fff7de;
  --sun-200: #ffeaad;
  --sun-300: #ffdb6e;
  --sun-400: #ffc91f;   /* galbenul din logo */
  --sun-500: #f2b400;
  --sun-600: #cf9700;
  --sun-700: #9d7100;

  --ink-900: #14110d;   /* negrul cald din logo */
  --ink-800: #221d16;
  --ink-700: #3a3229;
  --ink-600: #554c40;
  --ink-500: #6f665a;
  --ink-400: #8d8478;
  --ink-300: #b3aa9d;
  --ink-200: #d8d1c4;

  --red-300: #ff9188;
  --red-400: #ff6257;
  --red-500: #e8362b;   /* panglica PREȚ MIC */
  --red-600: #c4241b;

  --mint-300: #a8ecc7;
  --mint-400: #74dca3;
  --mint-500: #3fbd7d;  /* camionul */
  --mint-600: #2b9a63;

  --sky-300: #a9d8fb;
  --sky-400: #63b9f7;
  --sky-500: #2e9bee;   /* ochii */
  --sky-600: #1a7ac4;

  /* ── Suprafete ──────────────────────────────────────── */
  --bg: #ffffff;
  --paper: #fbf8f1;     /* off-white cald, pentru benzi alternate */
  --paper-2: #f5efe2;
  --line: #eae3d5;
  --line-strong: #ddd3bf;

  /* ── Text ───────────────────────────────────────────── */
  --text: var(--ink-900);
  --text-soft: var(--ink-600);
  --text-mute: var(--ink-400);
  --text-invert: #fffdf7;

  /* ── Semantice ──────────────────────────────────────── */
  --ok: var(--mint-600);
  --ok-bg: #eafaf1;
  --warn: #b57200;
  --warn-bg: var(--sun-100);
  --err: var(--red-600);
  --err-bg: #fdeceb;
  --info: var(--sky-600);
  --info-bg: #e9f4fe;

  /* ── Tipografie ─────────────────────────────────────── */
  --font-display: 'Clash Display', 'Clash Grotesk', 'Trebuchet MS', sans-serif;
  --font-body: 'Satoshi', 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Mono', ui-monospace, monospace;

  --t-xs:   clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --t-sm:   clamp(0.82rem, 0.79rem + 0.14vw, 0.90rem);
  --t-base: clamp(0.95rem, 0.91rem + 0.20vw, 1.05rem);
  --t-md:   clamp(1.08rem, 1.02rem + 0.30vw, 1.22rem);
  --t-lg:   clamp(1.28rem, 1.16rem + 0.55vw, 1.60rem);
  --t-xl:   clamp(1.60rem, 1.34rem + 1.20vw, 2.35rem);
  --t-2xl:  clamp(2.05rem, 1.55rem + 2.30vw, 3.40rem);
  --t-3xl:  clamp(2.60rem, 1.70rem + 4.10vw, 5.00rem);
  --t-hero: clamp(3.00rem, 1.60rem + 6.20vw, 7.00rem);

  --lh-tight: 0.94;
  --lh-snug: 1.14;
  --lh-body: 1.62;
  --track-tight: -0.03em;
  --track-wide: 0.14em;

  /* ── Spatiere (scala 4px, ritm de 8) ────────────────── */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.75rem;  --s-8: 3.5rem;
  --s-9: 5rem;     --s-10: 7rem;    --s-11: 9.5rem;

  --gutter: clamp(1.15rem, 4vw, 3rem);
  --maxw: 1280px;
  --maxw-narrow: 780px;
  --section-y: clamp(3.5rem, 8vw, 8rem);

  /* ── Rotunjiri (chunky, ca literele din logo) ───────── */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 36px;
  --r-2xl: 48px;
  --r-pill: 999px;

  /* ── Umbre: mereu stratificate, cu tenta calda ──────── */
  --shadow-hard:
    0 3px 0 0 var(--ink-900),
    0 10px 20px -12px rgba(20, 17, 13, 0.45);
  --shadow-hard-sm:
    0 2px 0 0 var(--ink-900),
    0 6px 12px -8px rgba(20, 17, 13, 0.4);
  --shadow-lift:
    0 1px 2px rgba(20, 17, 13, 0.04),
    0 8px 16px -12px rgba(20, 17, 13, 0.22),
    0 28px 48px -32px rgba(20, 17, 13, 0.28);
  --shadow-float:
    0 2px 4px rgba(20, 17, 13, 0.05),
    0 18px 32px -20px rgba(20, 17, 13, 0.28),
    0 48px 80px -48px rgba(20, 17, 13, 0.35);
  --shadow-ambient:
    0 0 0 1px var(--line),
    0 12px 28px -22px rgba(20, 17, 13, 0.35);
  --shadow-glow-sun: 0 18px 44px -18px rgba(242, 180, 0, 0.55);
  --shadow-glow-red: 0 18px 44px -20px rgba(232, 54, 43, 0.45);
  --shadow-inset-top: inset 0 2px 0 rgba(255, 255, 255, 0.55);

  /* ── Miscare ────────────────────────────────────────── */
  --ease-smooth: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-back: cubic-bezier(0.34, 1.42, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --d-fast: 130ms;
  --d-base: 220ms;
  --d-slow: 380ms;
  --d-lazy: 620ms;

  /* ── Straturi ───────────────────────────────────────── */
  --z-base: 1;
  --z-sticky: 50;
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ── Grile decorative ───────────────────────────────── */
  --grid-dot: radial-gradient(circle at 1px 1px, var(--line-strong) 1px, transparent 0);
  --hatch: repeating-linear-gradient(-45deg, var(--sun-200) 0 6px, transparent 6px 13px);
}

/* Accente contextuale: se pun pe o sectiune/card cu data-accent="red" etc. */
[data-accent='sun']  { --accent: var(--sun-400);  --accent-strong: var(--sun-600); --accent-soft: var(--sun-100); --accent-on: var(--ink-900); }
[data-accent='red']  { --accent: var(--red-500);  --accent-strong: var(--red-600); --accent-soft: #fdeceb;        --accent-on: #fffdf7; }
[data-accent='mint'] { --accent: var(--mint-500); --accent-strong: var(--mint-600);--accent-soft: #eafaf1;        --accent-on: var(--ink-900); }
[data-accent='sky']  { --accent: var(--sky-500);  --accent-strong: var(--sky-600); --accent-soft: #e9f4fe;        --accent-on: #fffdf7; }
[data-accent='ink']  { --accent: var(--ink-900);  --accent-strong: #000;           --accent-soft: #f2efe9;        --accent-on: var(--sun-400); }

:root { --accent: var(--sun-400); --accent-strong: var(--sun-600); --accent-soft: var(--sun-100); --accent-on: var(--ink-900); }