/* ============================================
   COLOR SYSTEM
   Generated from design tokens
   Dark theme (default)
   ============================================ */

/* --- Global Palette — Raw values --- */
:root {

  /* Neutral */
  --color-neutral-010: #F9F9F9;
  --color-neutral-020: #F0F0F0;
  --color-neutral-030: #E5E5E5;
  --color-neutral-040: #D4D4D4;
  --color-neutral-050: #BABABA;
  --color-neutral-060: #999999;
  --color-neutral-070: #787878;
  --color-neutral-080: #585858;
  --color-neutral-090: #3D3D3D;
  --color-neutral-100: #272727;
  --color-neutral-110: #181818;
  --color-neutral-120: #0A0A0B;

  /* Blue */
  --color-blue-010: #F0F8FF;
  --color-blue-020: #DDEEFF;
  --color-blue-030: #BADDFF;
  --color-blue-040: #7ECAFF;
  --color-blue-050: #3EB2FF;
  --color-blue-060: #0199F0;
  --color-blue-070: #0182E7;
  --color-blue-080: #006BC0;
  --color-blue-090: #00579A;
  --color-blue-100: #004778;
  --color-blue-110: #003D5A;
  --color-blue-120: #001F3D;

  /* Cyan */
  --color-cyan-010: #EDFFFE;
  --color-cyan-020: #D5FCFE;
  --color-cyan-030: #AEF6FA;
  --color-cyan-040: #72F0F7;
  --color-cyan-050: #2DE4EB;
  --color-cyan-060: #01D6E6;
  --color-cyan-070: #01B5C5;
  --color-cyan-080: #0192A0;
  --color-cyan-090: #007580;
  --color-cyan-100: #005C65;
  --color-cyan-110: #004248;
  --color-cyan-120: #002A30;

  /* Red */
  --color-red-010: #FEF2F2;
  --color-red-020: #FEE2E2;
  --color-red-030: #FECACA;
  --color-red-040: #FCA5A5;
  --color-red-050: #F87171;
  --color-red-060: #EF4444;
  --color-red-070: #DC2626;
  --color-red-080: #B91C1C;
  --color-red-090: #991B1B;
  --color-red-100: #7F1D1D;
  --color-red-110: #5C1414;
  --color-red-120: #3B0A0A;

  /* Yellow */
  --color-yellow-010: #FFFBEB;
  --color-yellow-020: #FEF3C7;
  --color-yellow-030: #FDE68A;
  --color-yellow-040: #FCD34D;
  --color-yellow-050: #FBBF24;
  --color-yellow-060: #F59E0B;
  --color-yellow-070: #D97706;
  --color-yellow-080: #B45309;
  --color-yellow-090: #92400E;
  --color-yellow-100: #78350F;
  --color-yellow-110: #5C2A0E;
  --color-yellow-120: #3D1E0A;

  /* Green */
  --color-green-010: #F0FDF4;
  --color-green-020: #DCFCE7;
  --color-green-030: #BBF7D0;
  --color-green-040: #86EFAC;
  --color-green-050: #4ADE80;
  --color-green-060: #22C55E;
  --color-green-070: #16A34A;
  --color-green-080: #15803D;
  --color-green-090: #166534;
  --color-green-100: #14532D;
  --color-green-110: #0F3D22;
  --color-green-120: #052E16;

  /* ============================================
     Semantic tokens — exact import from shared JSON
     ============================================ */

  /* Backgrounds */
  --semantic-color-bg-page:            var(--color-neutral-120);
  --semantic-color-bg-surface:         #121212;
  --semantic-color-bg-surface-raised:  var(--color-neutral-100);
  --semantic-color-bg-surface-overlay: var(--color-neutral-090);
  --semantic-color-bg-scrim:           var(--color-neutral-120);
  --semantic-color-bg-brand:           var(--color-blue-070);
  --semantic-color-bg-brand-subtle:    var(--color-blue-110);
  --semantic-color-bg-brand-muted:     var(--color-blue-120);
  --semantic-color-bg-accent:          var(--color-cyan-110);
  --semantic-color-bg-accent-muted:    var(--color-cyan-120);
  --semantic-color-bg-success:         var(--color-green-110);
  --semantic-color-bg-warning:         var(--color-yellow-110);
  --semantic-color-bg-danger:          var(--color-red-110);
  --semantic-color-bg-info:            var(--color-cyan-110);

  /* Text */
  --semantic-color-text-primary:       var(--color-neutral-010);
  --semantic-color-text-secondary:     var(--color-neutral-050);
  --semantic-color-text-tertiary:      var(--color-neutral-070);
  --semantic-color-text-disabled:      var(--color-neutral-080);
  --semantic-color-text-inverse:       var(--color-neutral-120);
  --semantic-color-text-brand:         var(--color-blue-050);
  --semantic-color-text-brand-strong:  var(--color-blue-040);
  --semantic-color-text-on-brand:      var(--color-neutral-010);
  --semantic-color-text-accent:        var(--color-cyan-060);
  --semantic-color-text-on-accent:     var(--color-neutral-120);
  --semantic-color-text-success:       var(--color-green-050);
  --semantic-color-text-warning:       var(--color-yellow-040);
  --semantic-color-text-danger:        var(--color-red-050);
  --semantic-color-text-info:          var(--color-cyan-050);
  --semantic-color-text-link:          var(--color-blue-050);
  --semantic-color-text-link-visited:  var(--color-blue-070);

  /* Borders */
  --semantic-color-border-subtle:      var(--color-neutral-100);
  --semantic-color-border-default:     var(--color-neutral-090);
  --semantic-color-border-strong:      var(--color-neutral-080);
  --semantic-color-border-brand:       var(--color-blue-070);
  --semantic-color-border-focus:       var(--color-blue-060);
  --semantic-color-border-accent:      var(--color-cyan-060);
  --semantic-color-border-success:     var(--color-green-070);
  --semantic-color-border-warning:     var(--color-yellow-070);
  --semantic-color-border-danger:      var(--color-red-070);
  --semantic-color-border-info:        var(--color-cyan-070);

  /* Icons */
  --semantic-color-icon-primary:       var(--color-neutral-010);
  --semantic-color-icon-secondary:     var(--color-neutral-050);
  --semantic-color-icon-disabled:      var(--color-neutral-080);
  --semantic-color-icon-on-brand:      var(--color-neutral-010);
  --semantic-color-icon-on-accent:     var(--color-neutral-120);
  --semantic-color-icon-brand:         var(--color-blue-050);
  --semantic-color-icon-accent:        var(--color-cyan-060);
  --semantic-color-icon-success:       var(--color-green-060);
  --semantic-color-icon-warning:       var(--color-yellow-060);
  --semantic-color-icon-danger:        var(--color-red-060);
  --semantic-color-icon-info:          var(--color-cyan-060);

  /* Interactive */
  --semantic-color-interactive-primary-default:   var(--color-blue-070);
  --semantic-color-interactive-primary-hover:     var(--color-blue-060);
  --semantic-color-interactive-primary-pressed:   var(--color-blue-080);
  --semantic-color-interactive-primary-disabled:  var(--color-neutral-100);
  --semantic-color-interactive-secondary-default: var(--color-neutral-100);
  --semantic-color-interactive-secondary-hover:   var(--color-neutral-090);
  --semantic-color-interactive-secondary-pressed: var(--color-neutral-080);
  --semantic-color-interactive-ghost-hover:       var(--color-neutral-100);
  --semantic-color-interactive-ghost-pressed:     var(--color-neutral-090);
  --semantic-color-interactive-danger-default:    var(--color-red-070);
  --semantic-color-interactive-danger-hover:      var(--color-red-060);
  --semantic-color-interactive-selection-bg:      var(--color-blue-110);
  --semantic-color-interactive-selection-border:  var(--color-blue-070);
  --semantic-color-interactive-toggle-on:         var(--color-blue-070);
  --semantic-color-interactive-toggle-off:        var(--color-neutral-090);
  --semantic-color-interactive-toggle-thumb:      var(--color-neutral-010);

  /* Backward-compatible aliases used by existing CSS */
  --bg-page:               var(--semantic-color-bg-page);
  --bg-surface:            var(--semantic-color-bg-surface);
  --bg-surface-secondary:  var(--semantic-color-bg-surface-raised);
  --bg-surface-tertiary:   var(--semantic-color-bg-surface-overlay);
  --bg-elevated:           var(--semantic-color-bg-surface-overlay);

  --text-primary:          var(--semantic-color-text-primary);
  --text-secondary:        var(--semantic-color-text-secondary);
  --text-tertiary:         var(--semantic-color-text-tertiary);
  --text-muted:            var(--semantic-color-text-tertiary);
  --text-disabled:         var(--semantic-color-text-disabled);
  --text-placeholder:      var(--semantic-color-text-tertiary);
  --text-on-brand:         var(--semantic-color-text-on-brand);

  --border-subtle:         var(--semantic-color-border-subtle);
  --border-default:        var(--semantic-color-border-default);
  --border-strong:         var(--semantic-color-border-strong);
  --border-disabled:       var(--semantic-color-border-subtle);
  --border-focus:          var(--semantic-color-border-focus);

  --interactive-default:   var(--semantic-color-interactive-primary-default);
  --interactive-hover:     var(--semantic-color-interactive-primary-hover);
  --interactive-active:    var(--semantic-color-interactive-primary-pressed);
  --interactive-disabled:  var(--semantic-color-interactive-primary-disabled);

  --brand-subtle:          var(--semantic-color-bg-brand-subtle);
  --brand-muted:           var(--semantic-color-bg-brand-muted);
  --brand-emphasis:        var(--semantic-color-bg-brand);
  --brand-emphasis-hover:  var(--semantic-color-interactive-primary-hover);
  --brand-emphasis-active: var(--semantic-color-interactive-primary-pressed);
  --brand-text:            var(--semantic-color-text-brand);
  --brand-icon:            var(--semantic-color-icon-brand);

  --accent-subtle:          var(--semantic-color-bg-accent);
  --accent-muted:           var(--semantic-color-bg-accent-muted);
  --accent-emphasis:        var(--semantic-color-text-accent);
  --accent-emphasis-hover:  var(--semantic-color-border-info);
  --accent-emphasis-active: var(--color-cyan-080);
  --accent-text:            var(--semantic-color-text-info);
  --accent-icon:            var(--semantic-color-icon-accent);

  --error-subtle:          var(--semantic-color-bg-danger);
  --error-muted:           var(--color-red-100);
  --error-emphasis:        var(--semantic-color-text-danger);
  --error-emphasis-hover:  var(--semantic-color-border-danger);
  --error-emphasis-active: var(--color-red-080);
  --error-text:            var(--semantic-color-text-danger);
  --error-icon:            var(--semantic-color-icon-danger);
  --error-border:          var(--semantic-color-border-danger);

  --warning-subtle:          var(--semantic-color-bg-warning);
  --warning-muted:           var(--color-yellow-100);
  --warning-emphasis:        var(--semantic-color-icon-warning);
  --warning-emphasis-hover:  var(--semantic-color-border-warning);
  --warning-emphasis-active: var(--color-yellow-080);
  --warning-text:            var(--semantic-color-text-warning);
  --warning-icon:            var(--semantic-color-icon-warning);
  --warning-border:          var(--semantic-color-border-warning);

  --success-subtle:          var(--semantic-color-bg-success);
  --success-muted:           var(--color-green-100);
  --success-emphasis:        var(--semantic-color-icon-success);
  --success-emphasis-hover:  var(--semantic-color-border-success);
  --success-emphasis-active: var(--color-green-080);
  --success-text:            var(--semantic-color-text-success);
  --success-icon:            var(--semantic-color-text-success);
  --success-border:          var(--semantic-color-border-success);

  --icon-primary:           var(--semantic-color-icon-primary);
  --icon-secondary:         var(--semantic-color-icon-secondary);
  --icon-tertiary:          var(--semantic-color-icon-secondary);
  --icon-disabled:          var(--semantic-color-icon-disabled);
  --icon-brand:             var(--semantic-color-icon-brand);
  --icon-accent:            var(--semantic-color-icon-accent);
  --icon-on-brand:          var(--semantic-color-icon-on-brand);

  /* State overlays */
  --state-hover:    var(--semantic-color-interactive-ghost-hover);
  --state-active:   var(--semantic-color-interactive-ghost-pressed);
  --state-selected: var(--semantic-color-interactive-selection-bg);

  /* Shadows */
  --shadow-none:        none;
  --shadow-xs:          0 1px 2px 0 rgba(0,0,0,0.5);
  --shadow-sm:          0 2px 4px 0 rgba(0,0,0,0.5);
  --shadow-md:          0 4px 8px -2px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.4);
  --shadow-lg:          0 8px 16px -4px rgba(0,0,0,0.5), 0 4px 8px -4px rgba(0,0,0,0.4);
  --shadow-xl:          0 16px 32px -8px rgba(0,0,0,0.6), 0 8px 16px -8px rgba(0,0,0,0.4);
  --shadow-2xl:         0 24px 48px -12px rgba(0,0,0,0.7);
  --shadow-glow-brand:  0 0 16px 0 rgba(1,130,231,0.3);
  --shadow-glow-accent: 0 0 16px 0 rgba(1,214,230,0.3);
  --shadow-glow-error:  0 0 16px 0 rgba(239,68,68,0.3);
  --shadow-inner:       inset 0 2px 4px 0 rgba(0,0,0,0.4);

  /* Semantic shadow aliases */
  --shadow-card:         var(--shadow-sm);
  --shadow-card-hover:   var(--shadow-md);
  --shadow-dropdown:     var(--shadow-lg);
  --shadow-modal:        var(--shadow-xl);
  --shadow-toast:        var(--shadow-lg);
  --shadow-popover:      var(--shadow-lg);
  --shadow-focus-brand:  var(--shadow-glow-brand);
  --shadow-focus-accent: var(--shadow-glow-accent);
  --shadow-focus-error:  var(--shadow-glow-error);

  /* Opacity */
  --opacity-disabled:      40%;
  --opacity-hover:         80%;
  --opacity-placeholder:   50%;
  --opacity-overlay:       70%;
  --opacity-overlay-light: 50%;
  --opacity-overlay-heavy: 90%;

  /* Shared role colors */
  --semantic-color-text-copy:            color-mix(in srgb, var(--semantic-color-text-primary) 60%, transparent);
  --semantic-color-text-copy-strong:     color-mix(in srgb, var(--semantic-color-text-primary) 68%, transparent);
  --semantic-color-text-copy-soft:       color-mix(in srgb, var(--semantic-color-text-primary) 50%, transparent);
  --semantic-color-text-caption:         color-mix(in srgb, var(--semantic-color-text-primary) 38%, transparent);
  --semantic-color-text-faint:           color-mix(in srgb, var(--semantic-color-text-primary) 24%, transparent);
  --semantic-color-border-soft:          color-mix(in srgb, var(--semantic-color-text-primary) 8%, transparent);
  --semantic-color-border-soft-strong:   color-mix(in srgb, var(--semantic-color-text-primary) 16%, transparent);
  --semantic-color-border-hairline:      color-mix(in srgb, var(--semantic-color-text-primary) 6%, transparent);
  --semantic-color-bg-surface-subtle:    color-mix(in srgb, var(--semantic-color-text-primary) 5%, transparent);
  --semantic-color-bg-surface-subtle-hi: color-mix(in srgb, var(--semantic-color-text-primary) 10%, transparent);

  /* -------------------------------------------------------------------------
     Eyebrow (section label chip)
     Grayjay Web — Figma node 3302-11196 (structure + tokens; accents vary per section)
     ------------------------------------------------------------------------- */
  --eyebrow-bg:              var(--semantic-color-bg-page);
  --eyebrow-border:          var(--border-subtle);
  --eyebrow-radius:          8px;
  --eyebrow-padding-y:       0px;
  --eyebrow-padding-x-start: 10px;
  --eyebrow-padding-x-end:   12px;
  --eyebrow-gap:             6px;
  --eyebrow-icon-size:       16px;

  /* Icon + label color per instance */
  --eyebrow-accent-privacy:       var(--semantic-color-text-accent);
  --eyebrow-accent-plugins:       var(--semantic-color-text-brand);
  --eyebrow-accent-how-it-works:  #e79236;
  --eyebrow-accent-casting:       #c084fc;
  --eyebrow-accent-comparison:    var(--semantic-color-text-success);

  /* -------------------------------------------------------------------------
     Spacing — section vertical rhythm
     ------------------------------------------------------------------------- */
  --space-section-top: 140px;
}

@media (max-width: 1024px) {
  :root {
    --space-section-top: 110px;
  }
}

@media (max-width: 760px) {
  :root {
    --space-section-top: 80px;
  }
}

@media (max-width: 480px) {
  :root {
    --space-section-top: 100px;
  }
}

/* ============================================
   Utility classes — semantic colors
   ============================================ */

/* Backgrounds */
.bg-page             { background-color: var(--bg-page); }
.bg-surface          { background-color: var(--bg-surface); }
.bg-surface-secondary{ background-color: var(--bg-surface-secondary); }
.bg-surface-tertiary { background-color: var(--bg-surface-tertiary); }
.bg-elevated         { background-color: var(--bg-elevated); }

/* Text */
.text-primary     { color: var(--text-primary); }
.text-secondary   { color: var(--text-secondary); }
.text-tertiary    { color: var(--text-tertiary); }
.text-muted       { color: var(--text-muted); }
.text-disabled    { color: var(--text-disabled); }
.text-brand       { color: var(--brand-text); }
.text-accent      { color: var(--accent-text); }
.text-error       { color: var(--error-text); }
.text-warning     { color: var(--warning-text); }
.text-success     { color: var(--success-text); }

/* Brand backgrounds */
.bg-brand-subtle   { background-color: var(--brand-subtle); }
.bg-brand-muted    { background-color: var(--brand-muted); }
.bg-brand          { background-color: var(--brand-emphasis); }

/* Accent backgrounds */
.bg-accent-subtle  { background-color: var(--accent-subtle); }
.bg-accent-muted   { background-color: var(--accent-muted); }
.bg-accent         { background-color: var(--accent-emphasis); }

/* Status backgrounds */
.bg-error          { background-color: var(--error-subtle); }
.bg-warning        { background-color: var(--warning-subtle); }
.bg-success        { background-color: var(--success-subtle); }

/* Borders */
.border-subtle     { border-color: var(--border-subtle); }
.border-default    { border-color: var(--border-default); }
.border-strong     { border-color: var(--border-strong); }
.border-focus      { border-color: var(--border-focus); }
.border-error      { border-color: var(--error-border); }
.border-warning    { border-color: var(--warning-border); }
.border-success    { border-color: var(--success-border); }