/* ============================================================
   StoryDesk Design Tokens
   Single source of truth for all visual properties.
   Import this file BEFORE any component or page stylesheet.
   ============================================================ */

:root {

  /* ── Brand Colours ──────────────────────────────────────── */
  --sd-brand-primary:     #143234;
  --sd-brand-accent:      #ED8767;
  --sd-brand-ink:         #1F2937;
  --sd-brand-battleship:  #6B7280;

  /* ── Semantic: Backgrounds ──────────────────────────────── */
  --sd-bg-page:           #FFFFFF;
  --sd-bg-elevated:       #FFFFFF;
  --sd-bg-sidebar:        #F8FAFB;
  --sd-bg-muted:          #F3F4F6;
  --sd-bg-info:           #EEF7F7;

  /* ── Semantic: Text ─────────────────────────────────────── */
  --sd-text-primary:      #1F2937;
  --sd-text-secondary:    #4B5563;
  --sd-text-muted:        #9CA3AF;
  --sd-text-on-primary:   #FFFFFF;

  /* ── Semantic: Borders ──────────────────────────────────── */
  --sd-border-default:    #E5E7EB;
  --sd-border-subtle:     #F3F4F6;

  /* ── Semantic: Interactive States ────────────────────────── */
  --sd-interactive:       #143234;
  --sd-interactive-hover: #1A4244;

  /* ── Semantic: CTA ──────────────────────────────────────── */
  --sd-cta:               #ED8767;
  --sd-cta-hover:         #D97046;

  /* ── Semantic: Status ───────────────────────────────────── */
  --sd-success:           #059669;
  --sd-success-light:     #D1FAE5;
  --sd-success-text:      #065F46;
  --sd-warning:           #D97706;
  --sd-warning-light:     #FEF3C7;
  --sd-warning-text:      #92400E;
  --sd-danger:            #DC2626;
  --sd-danger-light:      #FEE2E2;
  --sd-danger-text:       #991B1B;

  /* ── Typography: Font Families ──────────────────────────── */
  --sd-font-display:      Charter, Georgia, serif;
  --sd-font-body:         system-ui, -apple-system, sans-serif;
  --sd-font-mono:         'SF Mono', Consolas, monospace;

  /* ── Typography: Size Scale ─────────────────────────────── */
  --sd-text-xs:           0.75rem;   /* 12px */
  --sd-text-sm:           0.875rem;  /* 14px */
  --sd-text-base:         1rem;      /* 16px */
  --sd-text-lg:           1.125rem;  /* 18px */
  --sd-text-xl:           1.25rem;   /* 20px */
  --sd-text-2xl:          2rem;      /* 32px */

  /* ── Typography: Line Heights ───────────────────────────── */
  --sd-leading-tight:     1.25;
  --sd-leading-normal:    1.5;
  --sd-leading-relaxed:   1.65;

  /* ── Typography: Font Weights ───────────────────────────── */
  --sd-weight-normal:     400;
  --sd-weight-medium:     500;
  --sd-weight-semibold:   600;
  --sd-weight-bold:       700;

  /* ── Spacing Scale ──────────────────────────────────────── */
  --sd-space-1:           4px;
  --sd-space-2:           8px;
  --sd-space-3:           12px;
  --sd-space-4:           16px;
  --sd-space-5:           20px;
  --sd-space-6:           24px;
  --sd-space-8:           32px;
  --sd-space-10:          40px;
  --sd-space-12:          48px;

  /* ── Border Radius ──────────────────────────────────────── */
  --sd-radius-sm:         4px;
  --sd-radius-md:         6px;
  --sd-radius-lg:         8px;
  --sd-radius-xl:         12px;
  --sd-radius-2xl:        16px;
  --sd-radius-full:       9999px;

  /* ── Shadows ────────────────────────────────────────────── */
  --sd-shadow-sm:         0 1px 2px rgba(0, 0, 0, 0.05);
  --sd-shadow-md:         0 4px 6px rgba(0, 0, 0, 0.07),
                          0 2px 4px rgba(0, 0, 0, 0.04);
  --sd-shadow-lg:         0 10px 25px rgba(0, 0, 0, 0.1),
                          0 4px 10px rgba(0, 0, 0, 0.05);

  /* ── Transitions ────────────────────────────────────────── */
  --sd-transition-fast:   150ms ease;
  --sd-transition-base:   200ms ease;
  --sd-transition-slow:   300ms ease;

  /* ── Z-Index Scale ──────────────────────────────────────── */
  --sd-z-base:            0;
  --sd-z-dropdown:        10;
  --sd-z-sticky:          20;
  --sd-z-overlay:         30;
  --sd-z-modal:           40;
  --sd-z-toast:           50;
}


/* ── Dark Theme ───────────────────────────────────────────── */

[data-theme="dark"] {

  /* Backgrounds */
  --sd-bg-page:           #111827;
  --sd-bg-elevated:       #1F2937;
  --sd-bg-sidebar:        #111827;
  --sd-bg-muted:          #374151;
  --sd-bg-info:           #1A2E2E;

  /* Text */
  --sd-text-primary:      #F9FAFB;
  --sd-text-secondary:    #D1D5DB;
  --sd-text-muted:        #6B7280;
  --sd-text-on-primary:   #111827;

  /* Borders */
  --sd-border-default:    #374151;
  --sd-border-subtle:     #1F2937;

  /* Interactive */
  --sd-interactive:       #5EEAD4;
  --sd-interactive-hover: #99F6E4;

  /* CTA (stays warm, slightly lightened for contrast) */
  --sd-cta:               #F4A27A;
  --sd-cta-hover:         #ED8767;

  /* Status (lighter variants for dark backgrounds) */
  --sd-success:           #34D399;
  --sd-success-light:     #064E3B;
  --sd-success-text:      #6EE7B7;
  --sd-warning:           #FBBF24;
  --sd-warning-light:     #78350F;
  --sd-warning-text:      #FDE68A;
  --sd-danger:            #F87171;
  --sd-danger-light:      #7F1D1D;
  --sd-danger-text:       #FECACA;

  /* Shadows (deeper for dark surfaces) */
  --sd-shadow-sm:         0 1px 2px rgba(0, 0, 0, 0.3);
  --sd-shadow-md:         0 4px 6px rgba(0, 0, 0, 0.35),
                          0 2px 4px rgba(0, 0, 0, 0.2);
  --sd-shadow-lg:         0 10px 25px rgba(0, 0, 0, 0.4),
                          0 4px 10px rgba(0, 0, 0, 0.25);
}