/* =========================================================
   ACORDEON — Design System · Light Premium
========================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* ── Accent ── */
  --yellow:      #F5C518;
  --yellow-dark: #D9AC0E;
  --yellow-soft: #FFFCEB;
  --yellow-glow: rgba(245,197,24,0.18);
  --black:       #0B0B0C;

  /* ── Surfaces ── */
  --bg:          #F2F2F7;
  --surface:     #FFFFFF;
  --surface-2:   #F9F9FB;
  --surface-3:   #F2F2F7;
  --line:        rgba(60,60,67,0.08);
  --line-strong: rgba(60,60,67,0.14);

  /* ── Text ── */
  --ink:      #1C1C1E;
  --ink-2:    #1D1D1F;
  --ink-soft: #3A3A3C;
  --ink-3:    #6C6C70;
  --muted:    #6C6C70;
  --muted-2:  #8E8E93;
  --muted-3:  #AEAEB2;

  /* ── Semantic ── */
  --danger:       #FF3B30;
  --danger-soft:  #FFF1F0;
  --success:      #34C759;
  --success-soft: #F0FFF4;
  --warning:      #FF9500;
  --warning-soft: #FFF8EC;
  --info:         #007AFF;
  --info-soft:    #EFF6FF;

  /* ── Shape ── */
  --r-xs: 6px;
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-full: 999px;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.03);
  --shadow:    0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-md: 0 8px 28px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.05);
  --shadow-lg: 0 24px 64px rgba(0,0,0,0.13), 0 8px 24px rgba(0,0,0,0.07);
  --ring:      0 0 0 3px rgba(245,197,24,0.28);
  --ring-info: 0 0 0 3px rgba(0,122,255,0.20);
  --radius:    14px;

  /* ── Animation ── */
  --ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Legacy aliases ── */
  --gray-50:  #F9F9FB;
  --gray-100: #F2F2F7;
  --gray-200: rgba(60,60,67,0.08);
  --gray-300: rgba(60,60,67,0.14);
  --gray-500: #6C6C70;
  --gray-700: #3A3A3C;
  --gray-800: #1D1D1F;
  --gray-900: #1C1C1E;
}