/* ============================================
   DEV PROJECTS — Design Tokens
   Atomic: Primitives → Semantic → Component
   ============================================ */

/* --------------------------------------------
   PRIMITIVES — Raw values, not used directly
   -------------------------------------------- */
:root {
  /* --- Spacing (4px grid) --- */
  --dp-space-1: 4px;    --dp-space-2: 8px;    --dp-space-3: 12px;
  --dp-space-4: 16px;   --dp-space-5: 20px;   --dp-space-6: 24px;
  --dp-space-8: 32px;   --dp-space-10: 40px;  --dp-space-12: 48px;
  --dp-space-16: 64px;  --dp-space-20: 80px;  --dp-space-24: 96px;
  --dp-space-30: 120px; --dp-space-40: 160px;

  /* --- Radii --- */
  --dp-radius-sm: 8px;   --dp-radius-md: 12px;
  --dp-radius-lg: 16px;  --dp-radius-xl: 24px;
  --dp-radius-full: 9999px;

  /* --- Typography scale (minor-third ~1.2) --- */
  --dp-text-xs: 0.75rem;    /* 12px */
  --dp-text-sm: 0.875rem;   /* 14px */
  --dp-text-base: 1rem;     /* 16px */
  --dp-text-lg: 1.25rem;    /* 20px */
  --dp-text-xl: 1.5rem;     /* 24px */
  --dp-text-2xl: 2rem;      /* 32px */
  --dp-text-3xl: 2.5rem;    /* 40px */
  --dp-text-4xl: 3rem;      /* 48px */

  /* --- Font families --- */
  --dp-font-display: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dp-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dp-font-serif: Georgia, "Times New Roman", serif;

  /* --- Font weights --- */
  --dp-weight-normal: 400;
  --dp-weight-medium: 500;
  --dp-weight-semibold: 600;
  --dp-weight-bold: 700;
  --dp-weight-extrabold: 800;

  /* --- Line heights --- */
  --dp-leading-none: 1;
  --dp-leading-tight: 1.15;
  --dp-leading-snug: 1.25;
  --dp-leading-normal: 1.5;
  --dp-leading-relaxed: 1.6;

  /* --- Letter spacing --- */
  --dp-tracking-tight: -0.02em;
  --dp-tracking-normal: 0;
  --dp-tracking-wide: 0.04em;
  --dp-tracking-wider: 0.08em;

  /* --- Durations --- */
  --dp-duration-fast: 150ms;
  --dp-duration-base: 200ms;
  --dp-duration-slow: 400ms;
  --dp-duration-entrance: 600ms;

  /* --- Easings --- */
  --dp-ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dp-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Glass --- */
  --dp-glass-blur: 16px;

  /* --- Raw colors (not used directly — semantic tokens reference these) --- */
  --dp-raw-white: #FFFFFF;
  --dp-raw-black: #000000;
  --dp-raw-grey-50: #F7F8F8;
  --dp-raw-grey-100: #F4F5F8;
  --dp-raw-grey-200: #E2E4E9;
  --dp-raw-grey-400: #95A2B3;
  --dp-raw-grey-500: #5A6170;
  --dp-raw-grey-800: #18181B;
  --dp-raw-grey-900: #111113;
  --dp-raw-grey-950: #08090A;
  --dp-raw-accent: #5E6AD2;
  --dp-raw-accent-light: #7C85E0;
  --dp-raw-glow-purple: 139, 92, 246;
  --dp-raw-glow-blue: 99, 102, 241;
  --dp-raw-glow-teal: 16, 185, 129;
  --dp-raw-glow-amber: 245, 158, 11;
  --dp-raw-glow-green: 74, 222, 128;
  --dp-raw-brand-on-dark: var(--dp-raw-grey-50);
  --dp-raw-brand-on-light: var(--dp-raw-grey-900);

  /* --- Nav action (shared height for links, toggles, hamburger) --- */
  --dp-nav-action-height: 40px;

  /* --- Button (shared, 48px min height for a11y touch) --- */
  --dp-btn-radius: 6px;
  --dp-btn-padding: 0.625rem 1.25rem;
  --dp-btn-min-height: var(--dp-space-12); /* 48px */
  --dp-btn-font-size: 0.875rem;
  --dp-btn-font-weight: 600;

  /* --- Strip / device (shared, 8px grid) --- */
  --dp-strip-padding: var(--dp-space-16) var(--dp-space-8);
  --dp-strip-gap: var(--dp-space-8);
  --dp-device-radius: 1.5rem;

  /* --- Page section rhythm (airy gap between hero, strips, grid) --- */
  --dp-section-gap: var(--dp-space-24);

  /* --------------------------------------------
     SEMANTIC TOKENS — Dark theme (default)
     -------------------------------------------- */
  color-scheme: dark;

  /* Surfaces */
  --dp-bg-base: var(--dp-raw-grey-950);
  --dp-bg-raised: var(--dp-raw-grey-900);
  --dp-bg-elevated: var(--dp-raw-grey-900);
  --dp-bg-card: rgba(255, 255, 255, 0.03);
  --dp-glass-bg: rgba(255, 255, 255, 0.05);
  --dp-glass-bg-mid: rgba(30, 30, 30, 0.55);
  --dp-glass-bg-elevated: rgba(30, 30, 30, 0.85);
  --dp-bg-card-hover: rgba(255, 255, 255, 0.06);
  --dp-bg-overlay: rgba(0, 0, 0, 0.7);

  /* Text */
  --dp-text-primary: var(--dp-raw-grey-50);
  --dp-text-secondary: #9BA8B9;
  --dp-text-tertiary: rgba(255, 255, 255, 0.64);
  --dp-text-ghost: rgba(255, 255, 255, 0.20);
  --dp-brand-text: var(--dp-raw-brand-on-dark);

  /* Semantic: on-dark (inverse) context */
  --dp-on-dark-text-primary: var(--dp-raw-white);
  --dp-on-dark-text-secondary: rgba(255, 255, 255, 0.75);
  --dp-on-dark-surface: var(--dp-raw-grey-900);
  --dp-on-dark-surface-hover: var(--dp-raw-grey-50);
  --dp-on-dark-focus-ring: var(--dp-raw-white);

  /* Borders — whispers, not lines */
  --dp-border-default: rgba(255, 255, 255, 0.06);
  --dp-border-hover: rgba(255, 255, 255, 0.12);
  --dp-border-active: rgba(255, 255, 255, 0.20);
  --dp-border-divider: rgba(255, 255, 255, 0.04);

  /* Accent / brand — single source of truth for brand colour.
     Greyscale interim; will become lime (#DBFC56) later. */
  --dp-accent: var(--dp-raw-brand-on-dark);
  --dp-accent-hover: var(--dp-raw-grey-200);
  /* Hardcoded RGB of brand primitive — update when brand colour changes */
  --dp-accent-glow: rgba(247, 248, 248, 0.10);
  --dp-brand-on-brand: var(--dp-raw-brand-on-light);
  /* Card-scoped text (accounts for composited glass backgrounds) */
  --dp-card-text-primary: #FFFFFF;
  --dp-card-text-secondary: #B0BCCA;

  /* DEPRECATED: gradient text removed — kept for reference */
  --dp-gradient-text-from: rgba(255, 255, 255, 0.95);
  --dp-gradient-text-to: rgba(255, 255, 255, 0.60);

  /* DEPRECATED: gradient text removed — kept for reference */
  --dp-hero-line-from: rgba(255, 255, 255, 1);
  --dp-hero-line-to: rgba(255, 255, 255, 0.55);
  --dp-hero-accent-from: #B8C2FF;
  --dp-hero-accent-to: #5E6AD2;

  /* Glow colors (section accents) */
  --dp-glow-1: rgba(var(--dp-raw-glow-purple), 0.15);
  --dp-glow-2: rgba(var(--dp-raw-glow-blue), 0.15);
  --dp-glow-3: rgba(var(--dp-raw-glow-teal), 0.15);

  /* Noise overlay */
  --dp-noise-opacity: 0.04;

  /* Toggle (shared) */
  --dp-toggle-bg: rgba(255, 255, 255, 0.06);
  --dp-toggle-bg-hover: rgba(255, 255, 255, 0.10);
  --dp-toggle-icon: var(--dp-raw-grey-400);

  /* Theme toggle — sun hover (switch to light) */
  --dp-theme-sun-icon-hover: #facc15;
  --dp-theme-sun-bg-hover: linear-gradient(135deg, #0284c7 0%, #0369a1 50%, #075985 100%);

  /* Snake toggle — luminous hover */
  --dp-snake-icon-hover: #4ade80;
  --dp-snake-icon-glow: rgba(var(--dp-raw-glow-green), 0.5);

  /* Nav logo */
  --dp-nav-logo-ring: rgba(255, 255, 255, 1);
  --dp-nav-logo-bg: var(--dp-raw-black);
  --dp-nav-logo-swirl: var(--dp-raw-white);
  --dp-nav-logo-gradient-from: #B8C2FF;
  --dp-nav-logo-gradient-to: #5E6AD2;

  /* Button — primary (brand surface + contrasting text) */
  --dp-btn-bg-primary: var(--dp-accent);
  --dp-btn-text-primary: var(--dp-brand-on-brand);
  --dp-btn-hover-bg-primary: var(--dp-accent-hover);
  --dp-btn-focus-ring: var(--dp-accent);

  /* Button — primary on dark (white bg, dark text; for strip/dark sections) */
  --dp-btn-bg-primary-on-dark: var(--dp-raw-white);
  --dp-btn-text-primary-on-dark: var(--dp-on-dark-surface);
  --dp-btn-hover-bg-primary-on-dark: var(--dp-on-dark-surface-hover);
  --dp-btn-focus-ring-on-dark: var(--dp-on-dark-surface);

  /* Button — secondary on dark (outline; for strip external link) */
  --dp-btn-secondary-on-dark-border: rgba(255, 255, 255, 0.5);
  --dp-btn-secondary-on-dark-text: var(--dp-on-dark-text-primary);
  --dp-btn-secondary-on-dark-hover-bg: rgba(255, 255, 255, 0.1);
  --dp-btn-secondary-on-dark-focus-ring: var(--dp-on-dark-text-primary);

  /* Button — secondary on light (outline; for light overlay) */
  --dp-btn-secondary-on-light-text: rgba(0, 0, 0, 0.85);
  --dp-btn-secondary-on-light-border: rgba(0, 0, 0, 0.55);
  --dp-btn-secondary-on-light-hover-bg: rgba(0, 0, 0, 0.12);
  --dp-btn-secondary-on-light-focus-ring: rgba(0, 0, 0, 0.7);

  /* Strip — product strip (Fair Share); darkened for text contrast */
  --dp-strip-bg: #0a2020;
  --dp-strip-orb-1: #2e7d76;
  --dp-strip-orb-2: #E8919B;
  --dp-strip-orb-dark: rgba(0, 0, 0, 0.22);
  --dp-strip-orb-opacity: 0.4;
  --dp-strip-title-color: #eafcf8;
  --dp-strip-text-color: rgba(234, 252, 248, 0.85);
  --dp-strip-badge-bg: rgba(255, 255, 255, 0.15);
  --dp-strip-badge-text: rgba(234, 252, 248, 0.95);
  --dp-device-border: 1px solid rgba(255, 255, 255, 0.1);
  --dp-device-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  --dp-strip-title-from: var(--dp-strip-title-color);
  --dp-strip-title-to: var(--dp-strip-title-color);
  --dp-strip-border: 1px solid transparent;

  /* Strip theme — SCP Reader */
  --dp-strip-scp-bg: #141414;
  --dp-strip-scp-orb-1: #791a1f;
  --dp-strip-scp-orb-2: #431418;
  --dp-strip-scp-orb-dark: rgba(0, 0, 0, 0.18);
  --dp-strip-scp-orb-opacity: 0.3;
  --dp-strip-scp-title-color: #ffffff;
  --dp-strip-scp-text-color: rgba(255, 255, 255, 0.85);
  --dp-strip-scp-badge-bg: rgba(255, 255, 255, 0.08);
  --dp-strip-scp-badge-text: rgba(255, 255, 255, 0.9);
  --dp-strip-scp-device-border: 1px solid #303030;
  --dp-strip-scp-device-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);

  /* Strip theme — Flip 7 (navy + teal, on-dark) */
  --dp-strip-flip7-bg: lch(25 18 275);
  /* Title gradient: warm cream to muted teal (title-to tuned for WCAG AAA 7:1 on strip bg) */
  --dp-strip-flip7-title-from: lch(96 4 92);    /* cream-white, warm */
  --dp-strip-flip7-title-to: lch(83 6 185);     /* teal tint, AAA 7:1 (walked back from L80) */
  /* Strip border: teal-tinted whisper */
  --dp-strip-flip7-border: 1px solid lch(55 12 185 / 0.15);
  --dp-strip-flip7-orb-1: lch(55 12 185);       /* brand teal */
  --dp-strip-flip7-orb-2: lch(78 16 75);        /* brand orange */
  --dp-strip-flip7-orb-dark: rgba(0, 0, 0, 0.18);
  --dp-strip-flip7-orb-opacity: 0.4;
  --dp-strip-flip7-title-color: lch(96 4 92);
  --dp-strip-flip7-text-color: lch(92 3.5 92 / 0.9);
  --dp-strip-flip7-badge-bg: lch(35 10 185 / 0.55);
  --dp-strip-flip7-badge-text: lch(96 3 92);
  --dp-strip-flip7-device-border: 1px solid lch(38 8 265);
  --dp-strip-flip7-device-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);

  /* Resume / paper */
  --dp-paper-surface: #18181B;
  --dp-paper-text-primary: #F7F8F8;
  --dp-paper-text-secondary: #99A6B7;
  --dp-paper-border: rgba(255, 255, 255, 0.08);
  --dp-paper-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  --dp-paper-accent: var(--dp-raw-accent);

  /* === Contextual light tokens (available in dark theme) === */
  --dp-paper-surface-light: #FFFFFF;
  --dp-paper-text-primary-light: #111113;
  --dp-paper-text-secondary-light: #5A6170;
  --dp-paper-border-light: rgba(0, 0, 0, 0.06);
  --dp-paper-shadow-light: 0 8px 32px rgba(0, 0, 0, 0.12);
  --dp-paper-accent-light: var(--dp-raw-accent);

  /* --- Banner --- */
  --dp-banner-bg: var(--dp-accent);
  --dp-banner-text: var(--dp-brand-on-brand);
  --dp-banner-speed: 60s;

  /* ── Prose ── */
  --dp-prose-max-width: 760px;
  --dp-prose-gap: var(--dp-space-6);
  --dp-prose-section-gap: var(--dp-space-12);
  --dp-prose-heading-size: var(--dp-text-2xl);
  --dp-prose-subheading-size: var(--dp-text-xl);
  --dp-prose-body-size: var(--dp-text-base);
  --dp-prose-body-leading: var(--dp-leading-relaxed);

  /* ── Dropdown ── */
  --dp-dropdown-bg: rgba(30, 30, 30, 0.95);
  --dp-dropdown-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);

  /* ── Drawer ── */
  --dp-drawer-bg: var(--dp-glass-bg);
  --dp-drawer-overlay: var(--dp-bg-overlay);
  --dp-drawer-border: var(--dp-border-default);

  /* ── TLDR ── */
  --dp-tldr-bg: var(--dp-bg-raised);
  --dp-tldr-border: var(--dp-border-default);
  --dp-tldr-radius: var(--dp-radius-lg);
  --dp-tldr-padding: var(--dp-space-8);
  --dp-tldr-gap: var(--dp-space-4);
  --dp-tldr-heading-size: var(--dp-text-lg);
  --dp-tldr-bullet-size: var(--dp-prose-body-size);
  --dp-tldr-bullet-leading: var(--dp-prose-body-leading);
}

/* --------------------------------------------
   SEMANTIC TOKENS — Light theme
   -------------------------------------------- */
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces — "paper on desk" hierarchy */
  --dp-bg-base: #EDF0F7;
  --dp-bg-raised: #F0F2FA;
  --dp-bg-elevated: var(--dp-raw-white);
  --dp-bg-card: rgba(255, 255, 255, 0.75);
  --dp-glass-bg: rgba(255, 255, 255, 0.65);
  --dp-glass-bg-mid: rgba(255, 255, 255, 0.75);
  --dp-glass-bg-elevated: rgba(255, 255, 255, 0.85);
  --dp-bg-card-hover: rgba(255, 255, 255, 0.8);
  --dp-bg-overlay: rgba(255, 255, 255, 0.8);

  /* Text */
  --dp-text-primary: var(--dp-raw-grey-900);
  --dp-text-secondary: #4B5060;
  --dp-text-tertiary: rgba(0, 0, 0, 0.75);
  --dp-text-ghost: rgba(0, 0, 0, 0.20);
  --dp-brand-text: var(--dp-raw-brand-on-light);

  /* Semantic: on-dark (inverse) context — unchanged */
  --dp-on-dark-text-primary: var(--dp-raw-white);
  --dp-on-dark-text-secondary: rgba(255, 255, 255, 0.75);
  --dp-on-dark-surface: var(--dp-raw-grey-900);
  --dp-on-dark-surface-hover: var(--dp-raw-grey-50);
  --dp-on-dark-focus-ring: var(--dp-raw-white);

  /* Borders */
  --dp-border-default: rgba(0, 0, 0, 0.08);
  --dp-border-hover: rgba(0, 0, 0, 0.12);
  --dp-border-active: rgba(0, 0, 0, 0.20);
  --dp-border-divider: rgba(0, 0, 0, 0.06);

  /* Accent / brand */
  --dp-accent: var(--dp-raw-brand-on-light);
  --dp-accent-hover: var(--dp-raw-grey-800);
  /* Hardcoded RGB of brand primitive — update when brand colour changes */
  --dp-accent-glow: rgba(17, 17, 19, 0.06);
  --dp-brand-on-brand: var(--dp-raw-brand-on-dark);

  /* Card-scoped text */
  --dp-card-text-primary: var(--dp-raw-grey-900);
  --dp-card-text-secondary: #3B4049;

  /* DEPRECATED: gradient text removed — kept for reference */
  --dp-gradient-text-from: rgba(0, 0, 0, 0.90);
  --dp-gradient-text-to: rgba(0, 0, 0, 0.65);

  /* DEPRECATED: gradient text removed — kept for reference */
  --dp-hero-line-from: rgba(0, 0, 0, 0.92);
  --dp-hero-line-to: rgba(0, 0, 0, 0.72);
  --dp-hero-accent-from: #6B76E0;
  --dp-hero-accent-to: #4A52B8;

  /* Glow colors (reduced for light) */
  --dp-glow-1: rgba(var(--dp-raw-glow-purple), 0.08);
  --dp-glow-2: rgba(var(--dp-raw-glow-blue), 0.08);
  --dp-glow-3: rgba(var(--dp-raw-glow-teal), 0.08);

  /* Noise overlay */
  --dp-noise-opacity: 0.03;

  /* Toggle (shared) */
  --dp-toggle-bg: rgba(0, 0, 0, 0.04);
  --dp-toggle-bg-hover: rgba(0, 0, 0, 0.08);
  --dp-toggle-icon: var(--dp-raw-grey-500);

  /* Theme toggle — moon hover (switch to dark) */
  --dp-theme-moon-icon-hover: #fef9c3;
  --dp-theme-moon-bg-hover: #1e293b;

  /* Snake toggle — luminous hover */
  --dp-snake-icon-hover: #22c55e;
  --dp-snake-icon-glow: rgba(var(--dp-raw-glow-green), 0.4);

  /* Nav logo */
  --dp-nav-logo-ring: rgba(0, 0, 0, 0.12);

  /* Button — primary (brand surface + contrasting text) */
  --dp-btn-bg-primary: var(--dp-accent);
  --dp-btn-text-primary: var(--dp-brand-on-brand);
  --dp-btn-hover-bg-primary: var(--dp-accent-hover);
  --dp-btn-focus-ring: var(--dp-accent);

  /* Button — primary on dark (unchanged) */
  --dp-btn-bg-primary-on-dark: var(--dp-raw-white);
  --dp-btn-text-primary-on-dark: var(--dp-on-dark-surface);
  --dp-btn-hover-bg-primary-on-dark: var(--dp-on-dark-surface-hover);
  --dp-btn-focus-ring-on-dark: var(--dp-on-dark-surface);

  /* Button — secondary on dark (unchanged) */
  --dp-btn-secondary-on-dark-border: rgba(255, 255, 255, 0.5);
  --dp-btn-secondary-on-dark-text: var(--dp-on-dark-text-primary);
  --dp-btn-secondary-on-dark-hover-bg: rgba(255, 255, 255, 0.1);
  --dp-btn-secondary-on-dark-focus-ring: var(--dp-on-dark-text-primary);

  /* Button — secondary on light (unchanged) */
  --dp-btn-secondary-on-light-text: rgba(0, 0, 0, 0.85);
  --dp-btn-secondary-on-light-border: rgba(0, 0, 0, 0.55);
  --dp-btn-secondary-on-light-hover-bg: rgba(0, 0, 0, 0.12);
  --dp-btn-secondary-on-light-focus-ring: rgba(0, 0, 0, 0.7);

  /* Resume / paper */
  --dp-paper-surface: var(--dp-raw-white);
  --dp-paper-text-primary: var(--dp-raw-grey-900);
  --dp-paper-text-secondary: var(--dp-raw-grey-500);
  --dp-paper-border: rgba(0, 0, 0, 0.06);
  --dp-paper-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  --dp-paper-accent: var(--dp-raw-accent);

  /* Banner — brand bg + contrasting text */
  --dp-banner-bg: var(--dp-accent);
  --dp-banner-text: var(--dp-brand-on-brand);

  /* Dropdown */
  --dp-dropdown-bg: rgba(255, 255, 255, 0.95);
  --dp-dropdown-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);

  /* Drawer */
  --dp-drawer-bg: rgba(255, 255, 255, 0.85);
  --dp-drawer-overlay: rgba(0, 0, 0, 0.3);
  --dp-drawer-border: rgba(0, 0, 0, 0.08);

  /* TLDR */
  --dp-tldr-bg: var(--dp-bg-elevated);
  --dp-tldr-border: var(--dp-border-default);
}