/* ==========================================================================
   Sakofi Dual-Theme System (pleasemakeitstop)
   Theme 1: Classic Minimalist (classic-dark, latte, mocha)
   Theme 2: Cyberpunk Sakofian [SKFN] (sakofian-light, sakofian-dark, blueprint-cobalt)
   ========================================================================== */

:root {
  /* Spacing Tokens */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Default Typography Tokens (Classic Minimalist) */
  --font-family: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 15px;
  --font-size-md: 17px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 30px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;

  /* Default Radius Tokens (Classic Minimalist) */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Default Transitions & Shadows (Classic Minimalist: Flat / Zero Drop Shadow) */
  --transition-fast: 120ms ease;
  --transition-base: 180ms ease;
  --transition-smooth: 240ms cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-popover: 0 12px 32px rgba(0, 0, 0, 0.28);

  /* Safe Area Tokens */
  --safe-top: env(safe-area-inset-top, 20px);
  --safe-bottom: env(safe-area-inset-bottom, 20px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* Pro & Entitlement Tokens */
  --pro-gradient: linear-gradient(135deg, #f59e0b 0%, #ec4899 50%, #8b5cf6 100%);
  --pro-badge-bg: #2e210b;
  --pro-badge-text: #f59e0b;
  --meter-track: #1e1e28;
  --meter-fill: var(--accent);
  --meter-warning: #f59e0b;
  --meter-danger: var(--danger);

  /* Default Fallback Palette: Classic Dark (Reworked Reference Obsidian-Slate) */
  --bg-primary: #0b0b0e;
  --bg-surface: #14141a;
  --bg-surface-subtle: #121217;
  --bg-surface-elevated: #1c1c28;
  --bg-surface-hover: #22222d;
  --border-color: #22222d;
  --border-color-strong: #353547;
  --text-primary: #f9fafb;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  --accent: #3b82f6;
  --accent-dim: rgba(59, 130, 246, 0.15);
  --accent-subtle: rgba(59, 130, 246, 0.07);
  --accent-border: rgba(59, 130, 246, 0.42);
  --accent-glow: rgba(59, 130, 246, 0.26);
  --accent-contrast: #ffffff;
  accent-color: var(--accent);
  --accent-2: #38bdf8;
  --accent-3: #818cf8;
  --success: #10b981;
  --success-dim: rgba(16, 185, 129, 0.15);
  --danger: #ef4444;
  --danger-dim: rgba(239, 68, 68, 0.15);
  --warning: #f59e0b;
  --warning-dim: rgba(245, 158, 11, 0.15);
  --theme-color-meta: #0b0b0e;

  --space-star: rgba(255, 255, 255, 0.85);
  --space-photon: rgba(255, 255, 255, 0.75);
  --space-void-1: rgba(2, 2, 4, 0.88);
  --space-void-2: rgba(7, 7, 11, 0.7);
  --galaxy-stroke-1: rgba(255, 255, 255, 0.28);
  --galaxy-stroke-2: rgba(255, 255, 255, 0.15);
  --galaxy-stroke-3: rgba(255, 255, 255, 0.06);
  --galaxy-core-1: rgba(255, 255, 255, 0.08);
  --galaxy-core-2: rgba(255, 255, 255, 0.02);
}

/* ==========================================================================
   CYBERPUNK / SAKOFIAN UI MODE STRUCTURAL TOKENS
   ========================================================================== */
html[data-ui-mode="cyberpunk"] {
  --font-family: "Inter", "Chakra Petch", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Chakra Petch", "Rajdhani", "Space Grotesk", "Arial Black", sans-serif;
  --font-mono: "JetBrains Mono", "Space Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --line-height-tight: 1.1;
  --line-height-normal: 1.45;

  /* Strict Zero Border-Radius */
  --radius-xs: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-full: 0px;

  /* 45-Degree Chamfer Clip Polygons */
  --chamfer-sm: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  --chamfer-md: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  --chamfer-lg: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));

  /* Mechanical Step Transitions & Hard Offset Shadows */
  --transition-fast: 90ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-base: 140ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-smooth: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  --mecha-holo-gradient: linear-gradient(90deg, #FF71CE 0%, #B967FF 32%, #01CDFE 68%, #05FFA1 100%);
  --mecha-holo-pastel: linear-gradient(90deg, #F9A8D4 0%, #C4B5FD 45%, #67E8F9 100%);
  --pro-gradient: linear-gradient(90deg, #1E35FF 0%, #00E5FF 50%, #FF007A 100%);
}

/* ==========================================================================
   THEME 1: CLASSIC MINIMALIST — 3 SUBTHEMES
   (1) classic-dark  (2) latte  (3) mocha
   ========================================================================== */

/* Subtheme 1.1: Classic Dark (Obsidian-Slate Reference) */
html[data-theme="classic-dark"],
[data-theme="classic-dark"] {
  --bg-primary: #0b0b0e;
  --bg-surface: #14141a;
  --bg-surface-subtle: #121217;
  --bg-surface-elevated: #1c1c28;
  --bg-surface-hover: #22222d;
  --border-color: #22222d;
  --border-color-strong: #353547;
  --border-active: #3b82f6;
  --border-inactive: #20202a;

  --text-primary: #f9fafb;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;

  --accent: #3b82f6;
  --accent-dim: rgba(59, 130, 246, 0.15);
  --accent-subtle: rgba(59, 130, 246, 0.07);
  --accent-border: rgba(59, 130, 246, 0.42);
  --accent-glow: rgba(59, 130, 246, 0.26);
  --accent-contrast: #ffffff;
  accent-color: var(--accent);
  --accent-2: #38bdf8;
  --accent-3: #818cf8;
  --success: #10b981;
  --success-dim: rgba(16, 185, 129, 0.15);
  --danger: #ef4444;
  --danger-dim: rgba(239, 68, 68, 0.15);
  --warning: #f59e0b;
  --warning-dim: rgba(245, 158, 11, 0.15);
  --selection-bg: rgba(37, 99, 235, 0.3);
  --cursor-color: #60a5fa;
  --theme-color-meta: #0b0b0e;

  --space-star: rgba(255, 255, 255, 0.85);
  --space-photon: rgba(255, 255, 255, 0.75);
  --space-void-1: rgba(2, 2, 4, 0.88);
  --space-void-2: rgba(7, 7, 11, 0.7);
  --galaxy-stroke-1: rgba(255, 255, 255, 0.28);
  --galaxy-stroke-2: rgba(255, 255, 255, 0.15);
  --galaxy-stroke-3: rgba(255, 255, 255, 0.06);
  --galaxy-core-1: rgba(255, 255, 255, 0.08);
  --galaxy-core-2: rgba(255, 255, 255, 0.02);
}

/* Subtheme 1.2: Catppuccin Latte (Daylight Paper) */
html[data-theme="latte"],
[data-theme="latte"] {
  --bg-primary: #eff1f5;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #e6e9ef;
  --bg-surface-hover: #dce0e8;
  --border-color: #ccd0da;
  --border-color-strong: #bcc0cc;
  --border-active: #7287fd;
  --border-inactive: #9ca0b0;

  --text-primary: #4c4f69;
  --text-secondary: #565972;
  --text-muted: #696c83;

  --accent: #1e66f5;
  --accent-dim: rgba(30, 102, 245, 0.12);
  --accent-subtle: rgba(30, 102, 245, 0.07);
  --accent-border: rgba(30, 102, 245, 0.38);
  --accent-glow: rgba(30, 102, 245, 0.22);
  --accent-contrast: #ffffff;
  --accent-2: #04a5e5;
  --accent-3: #ea76cb;
  --success: #40a02b;
  --success-dim: rgba(64, 160, 43, 0.15);
  --danger: #d20f39;
  --danger-dim: rgba(210, 15, 57, 0.15);
  --warning: #df8e1d;
  --warning-dim: rgba(223, 142, 29, 0.15);
  --selection-bg: rgba(124, 127, 147, 0.25);
  --cursor-color: #dc8a78;
  --theme-color-meta: #eff1f5;

  --space-star: rgba(76, 79, 105, 0.7);
  --space-photon: rgba(30, 102, 245, 0.6);
  --space-void-1: rgba(239, 241, 245, 0.95);
  --space-void-2: rgba(230, 233, 239, 0.6);
  --galaxy-stroke-1: rgba(76, 79, 105, 0.22);
  --galaxy-stroke-2: rgba(114, 135, 253, 0.14);
  --galaxy-stroke-3: rgba(30, 102, 245, 0.05);
  --galaxy-core-1: rgba(114, 135, 253, 0.08);
  --galaxy-core-2: rgba(30, 102, 245, 0.02);
}

/* Subtheme 1.3: Catppuccin Mocha (Deep Midnight Mauve) */
html[data-theme="mocha"],
[data-theme="mocha"] {
  --bg-primary: #1e1e2e;
  --bg-surface: #313244;
  --bg-surface-elevated: #45475a;
  --bg-surface-hover: #585b70;
  --border-color: #45475a;
  --border-color-strong: #585b70;
  --border-active: #b4befe;
  --border-inactive: #6c7086;

  --text-primary: #cdd6f4;
  --text-secondary: #abb3ce;
  --text-muted: #959bb5;

  --accent: #b4befe;
  --accent-dim: rgba(180, 190, 254, 0.18);
  --accent-subtle: rgba(180, 190, 254, 0.09);
  --accent-border: rgba(180, 190, 254, 0.45);
  --accent-glow: rgba(180, 190, 254, 0.28);
  --accent-contrast: #11111b;
  --accent-2: #cba6f7;
  --accent-3: #f5c2e7;
  --success: #a6e3a1;
  --success-dim: rgba(166, 227, 161, 0.15);
  --danger: #f38ba8;
  --danger-dim: rgba(243, 139, 168, 0.15);
  --warning: #fab387;
  --warning-dim: rgba(250, 179, 135, 0.15);
  --selection-bg: rgba(147, 153, 178, 0.25);
  --cursor-color: #f5e0dc;
  --theme-color-meta: #1e1e2e;

  --space-star: rgba(255, 255, 255, 0.85);
  --space-photon: rgba(180, 190, 254, 0.75);
  --space-void-1: rgba(17, 17, 27, 0.9);
  --space-void-2: rgba(24, 24, 37, 0.75);
  --galaxy-stroke-1: rgba(180, 190, 254, 0.28);
  --galaxy-stroke-2: rgba(203, 166, 247, 0.16);
  --galaxy-stroke-3: rgba(137, 180, 250, 0.06);
  --galaxy-core-1: rgba(180, 190, 254, 0.1);
  --galaxy-core-2: rgba(203, 166, 247, 0.03);
}

/* ==========================================================================
   THEME 2: CYBERPUNK SAKOFIAN [SKFN] — 3 SUBTHEMES
   (1) sakofian-light  (2) sakofian-dark  (3) blueprint-cobalt
   ========================================================================== */

/* Subtheme 2.1: Sakofian Clinical [SKFN] (Lab White + Carbon Black + Electric Cobalt) */
html[data-theme="sakofian-light"],
[data-theme="sakofian-light"] {
  --bg-primary: #F4F5F8;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #E8ECF4;
  --bg-surface-hover: #DDE3F0;
  --border-color: #0A0B10;
  --border-color-strong: #0A0B10;
  --border-active: #1E35FF;
  --border-inactive: #94A3B8;

  --text-primary: #0A0B10;
  --text-secondary: #2D334A;
  --text-muted: #525B7A;

  --accent: #1E35FF;
  --accent-dim: rgba(30, 53, 255, 0.12);
  --accent-subtle: rgba(30, 53, 255, 0.07);
  --accent-border: rgba(30, 53, 255, 0.45);
  --accent-glow: rgba(30, 53, 255, 0.26);
  --accent-contrast: #FFFFFF;
  --accent-2: #00D2FF;
  --accent-3: #FF2A85;

  --success: #00A859;
  --success-dim: rgba(0, 168, 89, 0.14);
  --danger: #FF1E42;
  --danger-dim: rgba(255, 30, 66, 0.14);
  --warning: #FF9500;
  --warning-dim: rgba(255, 149, 0, 0.16);

  --mecha-grid-line: rgba(30, 53, 255, 0.08);
  --mecha-grid-major: rgba(30, 53, 255, 0.16);
  --shadow-sm: 3px 3px 0px #0A0B10;
  --shadow-md: 4px 4px 0px var(--accent);
  --shadow-lg: 6px 6px 0px #0A0B10;
  --shadow-popover: 6px 6px 0px var(--accent);
  --selection-bg: rgba(30, 53, 255, 0.22);
  --cursor-color: #1E35FF;
  --theme-color-meta: #F4F5F8;
}

/* Subtheme 2.2: Sakofian Eclipse Void (Carbon Void + Stark White) */
html[data-theme="sakofian-dark"],
[data-theme="sakofian-dark"] {
  --bg-primary: #06070B;
  --bg-surface: #0E1018;
  --bg-surface-elevated: #171B28;
  --bg-surface-hover: #202638;
  --border-color: #F8FAFC;
  --border-color-strong: #FFFFFF;
  --border-active: #FFFFFF;
  --border-inactive: #2E364F;

  --text-primary: #F8FAFC;
  --text-secondary: #B4C0D9;
  --text-muted: #7E8BA8;

  --accent: #FFFFFF;
  --accent-dim: rgba(255, 255, 255, 0.16);
  --accent-subtle: rgba(255, 255, 255, 0.08);
  --accent-border: rgba(255, 255, 255, 0.48);
  --accent-glow: rgba(255, 255, 255, 0.24);
  --accent-contrast: #06070B;
  --accent-2: #E2E8F0;
  --accent-3: #FF2A85;

  --success: #00E599;
  --success-dim: rgba(0, 229, 153, 0.16);
  --danger: #FF2A55;
  --danger-dim: rgba(255, 42, 85, 0.18);
  --warning: #FFB800;
  --warning-dim: rgba(255, 184, 0, 0.18);

  --mecha-grid-line: rgba(255, 255, 255, 0.08);
  --mecha-grid-major: rgba(255, 255, 255, 0.16);
  --shadow-sm: 3px 3px 0px #FFFFFF;
  --shadow-md: 4px 4px 0px var(--accent);
  --shadow-lg: 6px 6px 0px #FFFFFF;
  --shadow-popover: 6px 6px 0px var(--accent);
  --selection-bg: rgba(255, 255, 255, 0.25);
  --cursor-color: #FFFFFF;
  --theme-color-meta: #06070B;
}

/* Subtheme 2.3: Sakofian Blueprint (Soft Blueprint Blue Background + White Elements + Black Contrast) */
html[data-theme="blueprint-cobalt"],
[data-theme="blueprint-cobalt"],
html[data-theme="sakofian-blueprint"],
[data-theme="sakofian-blueprint"] {
  --bg-primary: #2B5B9E;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #F1F5F9;
  --bg-surface-hover: #E2E8F0;
  --border-color: #0A0B10;
  --border-color-strong: #0A0B10;
  --border-active: #0A0B10;
  --border-inactive: #64748B;

  --text-primary: #0A0B10;
  --text-secondary: #1E293B;
  --text-muted: #475569;

  --accent: #0A0B10;
  --accent-dim: rgba(10, 11, 16, 0.10);
  --accent-subtle: rgba(10, 11, 16, 0.06);
  --accent-border: rgba(10, 11, 16, 0.45);
  --accent-glow: rgba(10, 11, 16, 0.22);
  --accent-contrast: #FFFFFF;
  --accent-2: #2B5B9E;
  --accent-3: #FF2A85;

  --success: #00A859;
  --success-dim: rgba(0, 168, 89, 0.14);
  --danger: #E11D48;
  --danger-dim: rgba(225, 29, 72, 0.14);
  --warning: #D97706;
  --warning-dim: rgba(217, 119, 6, 0.16);

  --mecha-grid-line: rgba(255, 255, 255, 0.14);
  --mecha-grid-major: rgba(255, 255, 255, 0.28);
  --shadow-sm: 3px 3px 0px #0A0B10;
  --shadow-md: 4px 4px 0px var(--accent);
  --shadow-lg: 6px 6px 0px #0A0B10;
  --shadow-popover: 6px 6px 0px var(--accent);
  --selection-bg: rgba(43, 91, 158, 0.25);
  --cursor-color: #0A0B10;
  --theme-color-meta: #2B5B9E;
}

/* Custom Typography Tokens (Pro Presets & Uploaded Custom Fonts) */
html[data-font="literata"],
[data-font="literata"] {
  --font-family: "Literata", "Charter", "Iowan Old Style", "Georgia", serif;
  --font-display: "Literata", "Charter", "Georgia", serif;
}

html[data-font="serif"],
[data-font="serif"] {
  --font-family: "Merriweather", "Charter", "Georgia", "Cambria", "Times New Roman", serif;
  --font-display: "Merriweather", "Charter", "Georgia", serif;
}

html[data-font="atkinson"],
[data-font="atkinson"] {
  --font-family: "Atkinson Hyperlegible", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Atkinson Hyperlegible", "Plus Jakarta Sans", -apple-system, sans-serif;
}

html[data-font="lexend"],
[data-font="lexend"] {
  --font-family: "Lexend", "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Lexend", "Plus Jakarta Sans", -apple-system, sans-serif;
}

html[data-font="rounded"],
[data-font="rounded"] {
  --font-family: "Nunito", "SF Pro Rounded", "Quicksand", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Nunito", "SF Pro Rounded", -apple-system, sans-serif;
}

html[data-font="space-grotesk"],
[data-font="space-grotesk"] {
  --font-family: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
}

html[data-font="mono"],
[data-font="mono"] {
  --font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --font-display: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

html[data-font="dyslexic"],
[data-font="dyslexic"] {
  --font-family: "OpenDyslexic", "Lexend", "Comic Sans MS", "Arial Rounded MT Bold", sans-serif;
  --font-display: "OpenDyslexic", "Lexend", sans-serif;
  letter-spacing: 0.02em;
  word-spacing: 0.05em;
  line-height: 1.6;
}

html[data-font^="custom:"],
[data-font^="custom:"] {
  --font-family: var(--custom-uploaded-font, "Plus Jakarta Sans"), "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: var(--custom-uploaded-font, "Plus Jakarta Sans"), "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}