/* ── Project Design Tokens ────────────────────────────────────────────
   Generated by Nodge — edit freely or regenerate from project settings
   ──────────────────────────────────────────────────────────────────── */

/* Dark mode (default) */
:root {
  --color-text:             #d4dce8;
  --color-text-muted:       #b6b7b7;
  --color-bg:               #0f1923;
  --color-surface:          #152331;
  --color-surface-2:        #1b2c3d;
  --color-border:           #182939;
  --color-border-strong:    #2a3d50;
  --color-primary:          #fe904d;
  --color-primary-hover:    #fe7724;
  --color-primary-20:       rgba(254, 144, 77, 0.2);
  --color-primary-10:       rgba(254, 144, 77, 0.1);
  --color-secondary-20:     rgba(218, 155, 114, 0.2);
  --color-secondary:        #da9b72;
  --color-accent:           #e8c4a6;
  --color-accent-20:        rgba(232, 196, 166, 0.2);
  --color-muted-20:         rgba(182, 183, 183, 0.2);
  --color-overlay:          rgba(0, 0, 0, 0.6);
  --color-on-primary:       #1a1a1a;
  --color-hover:            rgba(255, 255, 255, 0.06);
  --color-active:           #0f1923;
  --color-error:            #e05252;
  --color-error-bg:         rgba(224, 82, 82, 0.1);
  --color-success:          #34d399;
  --color-success-bg:       rgba(52, 211, 153, 0.12);
  --color-warning:          #fbbf24;
  --color-warning-bg:       rgba(251, 191, 36, 0.12);

  --gradient-brand:         linear-gradient(135deg, #fe904d 0%, #e8c4a6 100%);
  --gradient-button:        linear-gradient(180deg, #fe904d 0%, #fe7724 100%);
  --color-nav-bg:           rgba(15, 25, 35, 0.82);

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md:  0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-lg:  0 16px 48px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 0 1px rgba(254, 144, 77, 0.28), 0 4px 20px rgba(254, 144, 77, 0.22);
  --ring:        0 0 0 3px rgba(254, 144, 77, 0.28);

  --font-ui:   var(--font-inter, 'Inter'), 'Satoshi', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, sans-serif;
  --font-code: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  --radius:    12px;
  --radius-sm: 8px;
  --radius-lg: 16px;

  color-scheme: dark;
}

/* Light mode (browser preference) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-text:             #1e293b;
    --color-text-muted:       #535558;
    --color-bg:               #ffffff;
    --color-surface:          #f8fafc;
    --color-surface-2:        #f1f5f9;
    --color-border:           #e5e7eb;
    --color-border-strong:    #d1d5db;
    --color-primary:          #e07422;
    --color-primary-hover:    #c75f12;
    --color-primary-20:       rgba(224, 116, 34, 0.15);
    --color-primary-10:       rgba(224, 116, 34, 0.08);
    --color-secondary-20:     rgba(180, 108, 60, 0.15);
    --color-secondary:        #b46c3c;
    --color-accent:           #9a5a2e;
    --color-accent-20:        rgba(154, 90, 46, 0.15);
    --color-muted-20:         rgba(83, 85, 88, 0.12);
    --color-overlay:          rgba(0, 0, 0, 0.5);
    --color-on-primary:       #ffffff;
    --color-hover:            rgba(224, 116, 34, 0.06);
    --color-active:           #f1f5f9;
    --color-error:            #c0392b;
    --color-error-bg:         rgba(192, 57, 43, 0.08);
    --color-success:          #059669;
    --color-success-bg:       rgba(5, 150, 105, 0.1);
    --color-warning:          #b45309;
    --color-warning-bg:       rgba(217, 119, 6, 0.12);

    --gradient-brand:         linear-gradient(135deg, #e07422 0%, #9a5a2e 100%);
    --gradient-button:        linear-gradient(180deg, #e07422 0%, #c75f12 100%);
    --color-nav-bg:           rgba(255, 255, 255, 0.85);

    --shadow-sm:  0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-md:  0 2px 8px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-lg:  0 16px 48px rgba(16, 24, 40, 0.14), 0 4px 12px rgba(16, 24, 40, 0.07);
    --shadow-glow: 0 0 0 1px rgba(224, 116, 34, 0.22), 0 4px 20px rgba(224, 116, 34, 0.18);
    --ring:        0 0 0 3px rgba(224, 116, 34, 0.22);

    color-scheme: light;
  }
}

/* Light mode (forced via user preference) */
:root[data-theme="light"] {
  --color-text:             #1e293b;
  --color-text-muted:       #535558;
  --color-bg:               #ffffff;
  --color-surface:          #f8fafc;
  --color-surface-2:        #f1f5f9;
  --color-border:           #e5e7eb;
  --color-border-strong:    #d1d5db;
  --color-primary:          #e07422;
  --color-primary-hover:    #c75f12;
  --color-primary-20:       rgba(224, 116, 34, 0.15);
  --color-primary-10:       rgba(224, 116, 34, 0.08);
  --color-secondary-20:     rgba(180, 108, 60, 0.15);
  --color-secondary:        #b46c3c;
  --color-accent:           #9a5a2e;
  --color-accent-20:        rgba(154, 90, 46, 0.15);
  --color-muted-20:         rgba(83, 85, 88, 0.12);
  --color-overlay:          rgba(0, 0, 0, 0.5);
  --color-on-primary:       #ffffff;
  --color-hover:            rgba(224, 116, 34, 0.06);
  --color-active:           #f1f5f9;
  --color-error:            #c0392b;
  --color-error-bg:         rgba(192, 57, 43, 0.08);
  --color-success:          #059669;
  --color-success-bg:       rgba(5, 150, 105, 0.1);
  --color-warning:          #b45309;
  --color-warning-bg:       rgba(217, 119, 6, 0.12);

  --gradient-brand:         linear-gradient(135deg, #e07422 0%, #9a5a2e 100%);
  --gradient-button:        linear-gradient(180deg, #e07422 0%, #c75f12 100%);
  --color-nav-bg:           rgba(255, 255, 255, 0.85);

  --shadow-sm:  0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md:  0 2px 8px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-lg:  0 16px 48px rgba(16, 24, 40, 0.14), 0 4px 12px rgba(16, 24, 40, 0.07);
  --shadow-glow: 0 0 0 1px rgba(224, 116, 34, 0.22), 0 4px 20px rgba(224, 116, 34, 0.18);
  --ring:        0 0 0 3px rgba(224, 116, 34, 0.22);

  color-scheme: light;
}

/* ── Logo variant swap ──────────────────────────────────────────────────
   Two wordmarks render in the DOM; exactly one is shown per theme, following
   the same cascade as the tokens above.
   logo-light.svg = dark ink (light bg) · logo-dark.svg = light ink (dark bg)
   ──────────────────────────────────────────────────────────────────── */

/* Dark mode (default): show the light-ink logo. */
.cc-logo-light { display: none; }
.cc-logo-dark  { display: block; }

/* Light mode via system preference (no explicit choice). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .cc-logo-light { display: block; }
  :root:not([data-theme="dark"]) .cc-logo-dark  { display: none; }
}

/* Light mode forced by the toggle. */
:root[data-theme="light"] .cc-logo-light { display: block; }
:root[data-theme="light"] .cc-logo-dark  { display: none; }

/* Dark mode forced by the toggle (wins over a light system preference). */
:root[data-theme="dark"] .cc-logo-light { display: none; }
:root[data-theme="dark"] .cc-logo-dark  { display: block; }