/* ═══════════════════════════════════════════════
   Design Tokens - CSS Custom Properties
   Edit this file to change the site theme.
   ═══════════════════════════════════════════════ */

:root {
  /* ── Surfaces ── */
  --color-bg:            #0D1B2A;
  --color-surface:       #1C2E42;
  --color-surface-alt:   #243547;
  --color-surface-hover: #2E4560;

  /* ── Borders ── */
  --color-border:        rgba(138, 168, 192, 0.12);
  --color-border-subtle: rgba(138, 168, 192, 0.06);
  --color-border-medium: rgba(138, 168, 192, 0.15);
  --color-border-btn:    rgba(138, 168, 192, 0.25);
  --color-card-border:   transparent;
  --color-divider:       rgba(138, 168, 192, 0.1);
  --color-table-hover:   rgba(36, 53, 71, 0.5);

  /* ── Text ── */
  --color-heading:       #F2F6F9;
  --color-body:          #B8CCDA;
  --color-muted:         #8AA8C0;
  --color-faint:         #4A6580;

  /* ── Accent (brand color - changes per theme) ── */
  --color-accent:        #E8803A;
  --color-accent-light:  #F0A06A;

  /* ── Secondary ── */
  --color-secondary:     #4A9EBF;

  /* ── Tertiary ── */
  --color-tertiary:      #7B6FD4;

  /* ── Shadows ── */
  --shadow-card:
    0 1px 3px rgba(232, 128, 58, 0.04),
    0 4px 12px rgba(13, 27, 42, 0.4),
    0 12px 36px rgba(13, 27, 42, 0.3);
  --shadow-card-elevated:
    0 2px 6px rgba(232, 128, 58, 0.06),
    0 8px 24px rgba(13, 27, 42, 0.5),
    0 20px 48px rgba(13, 27, 42, 0.4);
  --shadow-cta:
    0 2px 8px rgba(232, 128, 58, 0.25),
    0 8px 24px rgba(232, 128, 58, 0.15);

  /* ── Glows ── */
  --glow-accent:         rgba(232, 128, 58, 0.08);
  --glow-secondary:      rgba(74, 158, 191, 0.06);

  /* ── Typography ── */
  --font-display:        'DM Serif Display', serif;
  --font-body:           'DM Sans', sans-serif;
  --leading-body:        1.7;
  --tracking-display:    -0.03em;
  --tracking-section:    -0.02em;
  --font-size-intro:     17px;

  /* ── Sizing ── */
  --radius:              8px;

  /* ── Animation ── */
  --spring:              cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── DCP Theme ── */
[data-theme="dcp"] {
  --color-accent:        #4A9EBF;
  --color-accent-light:  #6DB8D4;
  --shadow-card:
    0 1px 3px rgba(74, 158, 191, 0.04),
    0 4px 12px rgba(13, 27, 42, 0.4),
    0 12px 36px rgba(13, 27, 42, 0.3);
  --shadow-card-elevated:
    0 2px 6px rgba(74, 158, 191, 0.06),
    0 8px 24px rgba(13, 27, 42, 0.5),
    0 20px 48px rgba(13, 27, 42, 0.4);
  --glow-accent:         rgba(74, 158, 191, 0.08);
}

/* ── Light DCP Theme ── */
[data-theme="light-dcp"] {
  --color-bg:            #F8FAFB;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #FFFFFF;
  --color-surface-hover: #F8FAFB;
  --color-border:        #E2E8F0;
  --color-border-subtle: #F1F5F9;
  --color-border-medium: #E2E8F0;
  --color-border-btn:    #CBD5E1;
  --color-card-border:   #E2E8F0;
  --color-divider:       #E2E8F0;
  --color-table-hover:   #F8FAFB;
  --color-heading:       #0F172A;
  --color-body:          #475569;
  --color-muted:         #94A3B8;
  --color-faint:         #CBD5E1;
  --color-accent:        #4A9EBF;
  --color-accent-light:  #6DB8D4;
  --color-secondary:     #4A9EBF;
  --shadow-card:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.03);
  --shadow-card-elevated:
    0 2px 6px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.06);
  --glow-accent:         rgba(74, 158, 191, 0.06);
  --glow-secondary:      rgba(74, 158, 191, 0.05);
}

/* ── Light Theme (homepage) ── */
[data-theme="light"] {
  --color-bg:            #F8FAFB;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #FFFFFF;
  --color-surface-hover: #F8FAFB;
  --color-border:        #E2E8F0;
  --color-border-subtle: #F1F5F9;
  --color-border-medium: #E2E8F0;
  --color-border-btn:    #CBD5E1;
  --color-card-border:   #E2E8F0;
  --color-divider:       #E2E8F0;
  --color-table-hover:   #F8FAFB;
  --color-heading:       #0F172A;
  --color-body:          #475569;
  --color-muted:         #94A3B8;
  --color-faint:         #CBD5E1;
  --shadow-card:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.03);
  --shadow-card-elevated:
    0 2px 6px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.06);
  --glow-accent:         rgba(232, 128, 58, 0.06);
  --glow-secondary:      rgba(74, 158, 191, 0.05);
}