/* ═══════════════════════════════════════════
   SHOPIDUO — Design Tokens
   Mirrors the Compose Color.kt / Theme.kt / Type.kt
═══════════════════════════════════════════ */
:root {
  /* Brand orange */
  --brand-50: #FFF3EC;
  --brand-100: #FFD9BF;
  --brand-200: #FFB48A;
  --brand-300: #FF9A6C;
  --brand-400: #FF7A47;
  --brand-500: #E8521A;
  --brand-600: #BF3C0D;
  --brand-700: #8C2A08;
  --brand-800: #5C1A04;
  --brand-900: #3A0E02;

  /* Secondary red */
  --red-400:   #FF6B5E;
  --red-500:   #C0392B;

  /* Tertiary amber */
  --amber-400: #FFB74D;
  --amber-500: #F59C1A;

  /* Neutrals light — Sand */
  --sand-0:   #FFFFFF;
  --sand-50:  #FFFDF9;
  --sand-100: #F5F0E8;
  --sand-150: #EDE5D8;
  --sand-200: #DDD4C4;
  --sand-300: #CCC0AE;
  --sand-400: #B0A090;
  --sand-500: #8A7868;
  --sand-600: #6E5E50;
  --sand-700: #4A3C30;
  --sand-800: #2E2018;
  --sand-900: #160E08;

  /* Neutrals dark — Midnight */
  --mid-50:  #E8EEF5;
  --mid-100: #A0B4CC;
  --mid-200: #6E88A8;
  --mid-300: #4E6080;
  --mid-400: #2E3D58;
  --mid-500: #1E2840;
  --mid-600: #151C2E;
  --mid-700: #0E1420;
  --mid-800: #080D16;

  /* Error */
  --err-500: #BA1A1A;
  --err-400: #FF897D;

  /* Savings / success */
  --save-light: #2D7A3A;
  --save-dark:  #4CAF72;

  /* Sale badge */
  --sale-bg:       #FFF0E5;
  --sale-txt:      #BF3C0D;
  --sale-sel-bg:   #E8521A;
  --sale-sel-txt:  #FFFFFF;
  --sale-dk-bg:    #3D1F00;
  --sale-dk-txt:   #FF9A6C;
  --sale-dk-sel-bg: #FF7A47;

  /* Cake avatar colors */
  --cake-orange: #FFE4D0;
  --cake-red:    #FFD9D6;
  --cake-amber:  #FFF0C0;
  --cake-green:  #D8F5D0;
  --cake-blue:   #CCDFF5;
  --cake-purple: #E0D0F8;
  --cake-pink:   #FFD8E8;
  --cake-teal:   #CCF2E8;
  --cake-violet: #EAD0FF;
  --cake-mint:   #D0FFE8;

  /* ─── Semantic (light / Sand theme) ─── */
  --bg:   var(--sand-100);
  --sf:   var(--sand-50);
  --sf2:  var(--sand-150);
  --sf3:  var(--sand-200);
  --ol:   rgba(22,14,8,.08);
  --ol2:  var(--sand-200);

  --fg1:  var(--sand-900);
  --fg2:  var(--sand-700);
  --fg3:  var(--sand-600);
  --fgm:  var(--sand-400);
  --fgd:  var(--sand-300);   /* disabled text */
  --fgob: var(--sand-0);

  --pr:   var(--brand-500);
  --prh:  var(--brand-600);
  --prs:  var(--brand-100);
  --op:   #fff;
  --ok:   var(--save-light);

  /* Shadows (light mode) */
  --s1: 0 1px 2px rgba(22,14,8,.06), 0 1px 1px rgba(22,14,8,.04);
  --s2: 0 4px 12px rgba(22,14,8,.08), 0 1px 2px rgba(22,14,8,.05);
  --s3: 0 12px 28px rgba(22,14,8,.12), 0 2px 6px rgba(22,14,8,.06);
  --sb: 0 8px 22px rgba(232,82,26,.28);

  /* Motion */
  --e:  cubic-bezier(.2,0,0,1);
  --ee: cubic-bezier(.3,0,0,1);
  --tf: 140ms;
  --tn: 220ms;
  --ts: 360ms;

  /* Radii — matching Compose RoundedCornerShape */
  --rm: 12px;   /* cards / items (12dp) */
  --ri: 14px;   /* inputs (14dp) */
  --rl: 18px;   /* buttons / cards (18dp) */
  --rx: 24px;   /* sheets / large cards (24dp) */
  --rf: 9999px; /* pill */
}

[data-theme="dark"] {
  --bg:   var(--mid-700);
  --sf:   var(--mid-600);
  --sf2:  var(--mid-500);
  --sf3:  var(--mid-400);
  --ol:   rgba(232,238,245,.10);
  --ol2:  var(--mid-400);

  --fg1:  var(--mid-50);
  --fg2:  var(--mid-100);
  --fg3:  var(--mid-200);
  --fgm:  var(--mid-300);
  --fgd:  var(--mid-400);
  --fgob: var(--mid-700);

  --pr:   var(--brand-400);
  --prh:  var(--brand-300);
  --prs:  var(--brand-700);
  --op:   #200800;
  --ok:   var(--save-dark);

  /* Shadows (dark mode — separation by color lift, minimal shadows) */
  --s1: none;
  --s2: none;
  --s3: 0 12px 28px rgba(0,0,0,.40);
  --sb: 0 8px 22px rgba(255,122,71,.22);
}