/* Jelly design tokens v4 — DIRECTION C "Shocking" — generated from tokens.json (source of truth).
   Sampled from the locked hero render r5-hero-a. The brand is TWO colours:
   shocking pink (#C8145F) and ivory — and the canvas is LIGHT. Cherry is the voice
   (type, actions, the mark), never the wallpaper: no large cherry fields.
   Rose is the only accent. There is no yellow. Signal red exists only for
   errors and late states, never for brand. */
:root {
  /* ---- raw ------------------------------------------------------------ */
  --raw-cherry-ink: #1E1418;   /* ink — deepest text (name kept for compatibility) */
  --raw-cherry:     #C8145F;   /* JELLY PINK — the brand + primary action (Schiaparelli register) */
  --raw-wine:       #A50E4C;   /* pressed */
  --raw-rose:       #EBD3DC;   /* soft line / dashed rules */
  --raw-tangerine:  #F25C26;   /* Pucci orange — sparing accent */
  --raw-blush:      #FBE7EF;   /* the hero ground's upper tone */
  --raw-petal:      #FDF2F6;   /* lightest tint */
  --raw-paper:      #FCF8F5;   /* page */
  --raw-white:      #FFFFFF;
  --raw-signal:     #C21B22;   /* errors + late ONLY */
  --raw-mauve:      #846C77;   /* secondary text */
  --raw-blush-on-cherry: #F3D2E0;

  /* ---- surface -------------------------------------------------------- */
  --color-surface-page: var(--raw-paper);
  --color-surface-raised: var(--raw-white);
  --color-surface-brand: var(--raw-blush);
  --color-surface-brand-deep: var(--raw-rose);
  --color-surface-tint: var(--raw-petal);
  --color-surface-inverse: var(--raw-cherry);
  --color-surface-inverse-deep: var(--raw-cherry-ink);
  --color-surface-accent: var(--raw-rose);

  /* ---- text ----------------------------------------------------------- */
  --color-text-primary: var(--raw-cherry-ink);
  --color-text-body: var(--raw-cherry);
  --color-text-secondary: var(--raw-mauve);
  --color-text-inverse: var(--raw-blush);
  --color-text-inverse-muted: var(--raw-blush-on-cherry);
  --color-text-price: var(--raw-cherry);

  /* ---- action — cherry leads ------------------------------------------ */
  --color-action-primary: var(--raw-cherry);
  --color-action-primary-pressed: var(--raw-wine);
  --color-action-secondary-bg: var(--raw-blush);
  --color-action-danger: var(--raw-signal);
  --color-focus-ring: rgba(79, 1, 2, 0.22);

  /* ---- border (used sparingly — surfaces carry structure, not boxes) --- */
  --color-border-soft: var(--raw-rose);
  --color-border-strong: var(--raw-cherry);

  /* ---- status --------------------------------------------------------- */
  --color-status-out-bg: var(--raw-blush);        --color-status-out-text: var(--raw-cherry);
  --color-status-due-bg: var(--raw-rose);         --color-status-due-text: #1E1418;
  --color-status-late-bg: #F6D2D2;                --color-status-late-text: #97141A;
  --color-status-returned-bg: #E3EDE6;            --color-status-returned-text: #38614A;

  /* ---- type ----------------------------------------------------------- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-ui: 'Instrument Sans', system-ui, sans-serif;
  --font-display-settings: 'SOFT' 100, 'WONK' 0;
  --type-hero: 900 56px/1.02 var(--font-display);
  --type-display-lg: 900 40px/1.06 var(--font-display);
  --type-heading: 900 26px/1.16 var(--font-display);
  --type-title: 600 16px/1.28 var(--font-display);
  --type-body: 400 15px/1.62 var(--font-ui);
  --type-small: 400 13px/1.5 var(--font-ui);
  --track-hero: -0.02em;

  /* ---- space ---------------------------------------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px; --space-10: 80px;

  /* ---- radius — poured, not boxed ------------------------------------- */
  --radius-chip: 12px;
  --radius-btn: 12px;          /* buttons are NOT pills anymore */
  --radius-input: 12px;
  --radius-card: 16px;
  --radius-panel: 20px;
  --radius-pill: 999px;

  /* ---- elevation — always cherry-tinted, never neutral grey ----------- */
  --elevation-card: 0 3px 14px rgba(79, 1, 2, 0.07);
  --elevation-raised: 0 14px 36px rgba(79, 1, 2, 0.13);
  --elevation-float: 0 26px 64px rgba(79, 1, 2, 0.20);

  /* ---- motion — the brand wobbles ------------------------------------- */
  --motion-wobble: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-fast: 140ms;
  --motion-base: 220ms;
  --motion-slow: 420ms;
}