:root {
  /* Bright Ocean Palette */
  --primary: #0096C7;
  --primary-light: #48CAE4;
  --primary-lighter: #ADE8F4;
  --primary-bg: rgba(0, 150, 199, 0.07);
  --primary-t3: rgba(0, 150, 199, 0.10);
  --accent: #FF6B35;
  --accent-light: #FF8F66;
  --green: #00B894;
  --green-bg: #E6FFF8;
  --yellow: #FFD166;
  --error: #EF4444;
  --warning: #F59E0B;
  --success: #00B894;

  /* Text on light */
  --text-1: #1A2B3D;
  --text-2: #3D5068;
  --text-3: #7A8FA3;
  --text-4: #A8B8C8;
  --text-heading: #0D1B2A;
  --text-sub: #7A8FA3;
  --text-disabled: #C5D0DA;

  /* Bright backgrounds */
  --bg-page: #F4F7FA;
  --bg-card: rgba(255, 255, 255, 0.92);
  --bg-dark: #E8EEF4;
  --bg-darker: #DDE5ED;

  /* Borders */
  --border: rgba(0, 150, 199, 0.15);
  --border-light: rgba(0, 150, 199, 0.08);
  --border-subtle: rgba(0, 0, 0, 0.05);

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* Shadows - soft & warm */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.10);
  --shadow-glow: 0 0 20px rgba(0, 150, 199, 0.15);

  /* Fonts */
  --font: 'Inter', 'Noto Sans JP', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* Chrome (for topbar) */
  --chrome-darker: #FFFFFF;
}