/* style.css — Design Tokens & Component Styles
   Bloomberg Terminal × Linear aesthetic
   Dark mode default, monochrome base, strategic category color */

/* ============================================
   TYPOGRAPHY
   DM Sans for body/UI, Space Grotesk for display
   ============================================ */

:root {
  --font-display: 'Space Grotesk', 'DM Sans', sans-serif;
  --font-body: 'DM Sans', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* --- Type Scale (fluid) --- */
  --text-xs:   clamp(0.6875rem, 0.65rem + 0.2vw, 0.8125rem);
  --text-sm:   clamp(0.8125rem, 0.75rem + 0.3vw, 0.9375rem);
  --text-base: clamp(0.9375rem, 0.875rem + 0.3vw, 1.0625rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-xl:   clamp(1.375rem, 1.1rem + 1vw, 2rem);
  --text-2xl:  clamp(1.75rem, 1.2rem + 2vw, 3rem);
  --text-3xl:  clamp(2.25rem, 1rem + 3.5vw, 4.5rem);

  /* --- Spacing (4px base) --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Radius --- */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  /* --- Transitions --- */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Content widths --- */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1280px;
  --content-max: 1440px;
  --content-full: 100%;

  /* --- Category Colors (consistent across modes) --- */
  --cat-security: #3b9ece;
  --cat-security-bg: rgba(59, 158, 206, 0.12);
  --cat-governance: #d4a843;
  --cat-governance-bg: rgba(212, 168, 67, 0.12);
  --cat-both: #3bab8a;
  --cat-both-bg: rgba(59, 171, 138, 0.12);
  --cat-acquired: #8b8b8b;
  --cat-acquired-bg: rgba(139, 139, 139, 0.12);
}

/* ============================================
   DARK MODE (DEFAULT)
   Bloomberg Terminal-inspired: deep charcoal base
   ============================================ */
:root, [data-theme="dark"] {
  --color-bg:               #0d0f11;
  --color-surface:          #141719;
  --color-surface-2:        #1a1d21;
  --color-surface-offset:   #1e2126;
  --color-surface-offset-2: #24282d;
  --color-surface-dynamic:  #2a2f35;
  --color-divider:          #2e3339;
  --color-border:           #383e45;

  --color-text:             #e0e1e3;
  --color-text-muted:       #8b9099;
  --color-text-faint:       #555c66;
  --color-text-inverse:     #0d0f11;

  --color-primary:          #3b9ece;
  --color-primary-hover:    #58b0da;
  --color-primary-active:   #2a89b8;
  --color-primary-highlight: #1a2a35;

  --color-success:          #3bab8a;
  --color-warning:          #d4a843;
  --color-error:            #d45a5a;
  --color-notification:     #c77dba;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* System preference fallback */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:               #0d0f11;
    --color-surface:          #141719;
    --color-surface-2:        #1a1d21;
    --color-surface-offset:   #1e2126;
    --color-surface-offset-2: #24282d;
    --color-surface-dynamic:  #2a2f35;
    --color-divider:          #2e3339;
    --color-border:           #383e45;
    --color-text:             #e0e1e3;
    --color-text-muted:       #8b9099;
    --color-text-faint:       #555c66;
    --color-text-inverse:     #0d0f11;
    --color-primary:          #3b9ece;
    --color-primary-hover:    #58b0da;
    --color-primary-active:   #2a89b8;
    --color-primary-highlight: #1a2a35;
    --color-success:          #3bab8a;
    --color-warning:          #d4a843;
    --color-error:            #d45a5a;
    --color-notification:     #c77dba;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  }
}

/* ============================================
   LIGHT MODE
   Clean, slightly cool-gray foundation
   ============================================ */
[data-theme="light"] {
  --color-bg:               #f5f6f8;
  --color-surface:          #ffffff;
  --color-surface-2:        #f9fafb;
  --color-surface-offset:   #eef0f3;
  --color-surface-offset-2: #e5e8ec;
  --color-surface-dynamic:  #dce0e5;
  --color-divider:          #d1d5db;
  --color-border:           #c3c8d0;

  --color-text:             #111318;
  --color-text-muted:       #5f6673;
  --color-text-faint:       #a0a6b1;
  --color-text-inverse:     #f5f6f8;

  --color-primary:          #1a7daa;
  --color-primary-hover:    #15698f;
  --color-primary-active:   #115676;
  --color-primary-highlight: #d6ecf5;

  --color-success:          #2a8a6e;
  --color-warning:          #b0891a;
  --color-error:            #b83a3a;
  --color-notification:     #9a5590;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --color-bg:               #f5f6f8;
    --color-surface:          #ffffff;
    --color-surface-2:        #f9fafb;
    --color-surface-offset:   #eef0f3;
    --color-surface-offset-2: #e5e8ec;
    --color-surface-dynamic:  #dce0e5;
    --color-divider:          #d1d5db;
    --color-border:           #c3c8d0;
    --color-text:             #111318;
    --color-text-muted:       #5f6673;
    --color-text-faint:       #a0a6b1;
    --color-text-inverse:     #f5f6f8;
    --color-primary:          #1a7daa;
    --color-primary-hover:    #15698f;
    --color-primary-active:   #115676;
    --color-primary-highlight: #d6ecf5;
    --color-success:          #2a8a6e;
    --color-warning:          #b0891a;
    --color-error:            #b83a3a;
    --color-notification:     #9a5590;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
  }
}