/**
 * RoccOS Design Tokens
 * Bauhaus Poster — Bold graphic palette with warm light surfaces (default).
 * Orange/amber accent, crimson & emerald accents, monospace UI.
 */

@font-face {
  font-family: 'PP Editorial New';
  src: url('/assets/fonts/PPEditorialNew.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Radio Grotesk';
  src: url('/assets/fonts/PPRadioGrotesk.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Palette: Bauhaus Poster (light default) ── */
  --os-bg:            #F2E6D4;
  --os-bg-warm:       #FAF3E8;
  --os-surface:       #FFFDF8;
  --os-surface-raised:#F5EDE0;
  --os-surface-hover: #EBE0D0;
  --os-border:        #C4AD92;
  --os-border-subtle: #D8C8B0;

  /* Text — dark warm */
  --os-text:          #1A1210;
  --os-text-secondary:#6B5A48;
  --os-text-muted:    #9A8A78;
  --os-text-inverse:  #E8D5B7;

  /* Accent — orange/amber */
  --os-accent:        #F0A030;
  --os-accent-hover:  #D88A20;
  --os-accent-muted:  rgba(240, 160, 48, 0.15);
  --os-accent-text:   #0A0A0A;

  /* Secondary — crimson red */
  --os-coral:         #C22B2B;
  --os-coral-muted:   rgba(194, 43, 43, 0.15);

  /* Tertiary — emerald green */
  --os-sage:          #1A7A3D;
  --os-sage-muted:    rgba(26, 122, 61, 0.15);

  /* System colors */
  --os-success:       #22c55e;
  --os-warning:       #fbbf24;
  --os-error:         #ef4444;
  --os-info:          #38bdf8;

  /* Traffic light buttons */
  --os-btn-close:     #ff5f57;
  --os-btn-minimize:  #febc2e;
  --os-btn-maximize:  #28c840;
  --os-btn-inactive:  #D8C8B0;

  /* Gradient accent */
  --os-gradient-accent: linear-gradient(135deg, #1484EC, #EEF2E5);

  /* Fourth accent — blue */
  --os-purple:        #1484EC;
  --os-purple-muted:  rgba(20, 132, 236, 0.15);

  /* ── Color Blocking — Blue palette (default) ── */
  --os-desktop-bg:         #1484EC;
  --os-menu-bg:            #EEF2E5;
  --os-menu-border:        #1A1210;
  --os-menu-text:          #1A1210;
  --os-dock-bg:            #EEF2E5;
  --os-dock-border:        #1A1210;
  --os-titlebar-bg:        #EEF2E5;
  --os-titlebar-text:      #0A0A0A;
  --os-titlebar-border:    #1A1210;
  --os-titlebar-inactive:  #F5EDE0;
  --os-titlebar-text-inactive: #6B5A48;

  /* Kill glassmorphism — solid surfaces */
  --os-glass:         var(--os-surface);
  --os-glass-border:  var(--os-border);
  --os-glass-blur:    0px;

  --crt-glare-color:   255, 255, 255;
  --crt-gleam-color:   255, 255, 255;

  /* ── Spacing Scale (4px base) ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ── Type Scale ── */
  --font-system:  'SF Mono', 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --font-display: 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --font-mono:    'SF Mono', 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  42px;

  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Border Radius — sharper, retro ── */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-xl:   8px;
  --radius-2xl:  8px;
  --radius-full: 9999px;

  /* ── Shadows — hard-cast offset, zero blur ── */
  --shadow-sm:    2px 2px 0 rgba(0,0,0,0.25);
  --shadow-md:    3px 3px 0 rgba(0,0,0,0.35);
  --shadow-lg:    4px 4px 0 rgba(0,0,0,0.4);
  --shadow-xl:    6px 6px 0 rgba(0,0,0,0.4);
  --shadow-window:4px 4px 0 rgba(0,0,0,0.4);
  --shadow-glow:  0 0 20px rgba(240, 160, 48, 0.35);

  /* ── Z-Index Layers ── */
  --z-scene-bg:       -1;
  --z-laptop:          1;
  --z-desktop:         5;
  --z-scene-hint:      6;
  --z-wallpaper:      0;
  --z-desktop-icons:  10;
  --z-greta:          20;
  --z-windows:        100;
  --z-gio:            500;
  --z-gio-chat:       510;
  --z-dock:           600;
  --z-menu-bar:       700;
  --z-context-menu:   800;
  --z-overlay:        900;
  --z-game-overlay:   1000;
  --z-boot:           1000;
  --z-notification:   1100;
  --z-onboarding:     2000;
  --z-skip-link:      10000;
  --z-name-burst:     10000;
  --z-spotlight:      9500;
  --z-crt-overlay:    9998;
  --z-mega-menu-backdrop: 9998;
  --z-mega-menu-panel:9999;
  --z-preloader:      99999;
  --z-cursor:         99999;

  /* ── Transitions ── */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring:    cubic-bezier(0.22, 1.2, 0.36, 1);

  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;

  /* ── Layout ── */
  --menu-bar-height: 32px;
  --dock-height:     68px;
  --dock-padding:    8px;
  --desktop-padding: 16px;
  --icon-size:       80px;
  --icon-grid-gap:   20px;
}

/* ── Light mode ── */
[data-theme="light"] {
  --crt-glare-color:   255, 255, 255;
  --crt-gleam-color:   255, 255, 255;
  --os-bg:            #F2E6D4;
  --os-bg-warm:       #FAF3E8;
  --os-surface:       #FFFDF8;
  --os-surface-raised:#F5EDE0;
  --os-surface-hover: #EBE0D0;
  --os-border:        #C4AD92;
  --os-border-subtle: #D8C8B0;
  --os-text:          #1A1210;
  --os-text-secondary:#6B5A48;
  --os-text-muted:    #9A8A78;
  --os-text-inverse:  #E8D5B7;
  --os-glass:         var(--os-surface);
  --os-glass-border:  var(--os-border);
  --os-btn-inactive:  #D8C8B0;

  /* Light theme only overrides inactive titlebar (palette colors inherit from :root) */
  --os-titlebar-inactive:  #F5EDE0;
  --os-titlebar-text-inactive: #6B5A48;
}

/* ── Dark mode override ── */
[data-theme="dark"] {
  --os-bg:            #0A0A0A;
  --os-bg-warm:       #121210;
  --os-surface:       #1A1816;
  --os-surface-raised:#242220;
  --os-surface-hover: #2E2A28;
  --os-border:        #3D3530;
  --os-border-subtle: #2A2420;
  --os-text:          #E8D5B7;
  --os-text-secondary:#C4AD92;
  --os-text-muted:    #8A7A68;
  --os-text-inverse:  #0A0A0A;
  --os-accent-text:   #0A0A0A;
  --os-glass:         #1A1816;
  --os-glass-border:  #3D3530;
  --os-btn-inactive:  #2A2420;
  --os-desktop-bg:    #0A0A0A;
  --os-menu-bg:       #1A1816;
  --os-menu-border:   #3D3530;
  --os-menu-text:     #E8D5B7;
  --os-dock-bg:       #1A1816;
  --os-dock-border:   #3D3530;
  --os-titlebar-bg:   #242220;
  --os-titlebar-text: #E8D5B7;
  --os-titlebar-border:#3D3530;
  --os-titlebar-inactive:  #242220;
  --os-titlebar-text-inactive: #C4AD92;
}

/* ── Themed Scrollbars ── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--os-border) transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--os-border);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--os-text-muted);
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* ── SEO Content (visually hidden, accessible to crawlers + screen readers) ── */
.seo-content {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Retro theme (Konami code) ── */
[data-theme="retro"] {
  --crt-glare-color:   51, 255, 51;
  --crt-gleam-color:   51, 255, 51;
  --os-bg:            #0a0a0a;
  --os-bg-warm:       #0f0f0f;
  --os-surface:       #1a1a1a;
  --os-surface-raised:#222222;
  --os-surface-hover: #2a2a2a;
  --os-border:        #33ff33;
  --os-border-subtle: rgba(51, 255, 51, 0.2);
  --os-text:          #33ff33;
  --os-text-secondary:#22cc22;
  --os-text-muted:    #119911;
  --os-accent:        #33ff33;
  --os-accent-hover:  #66ff66;
  --os-glass:         rgba(10, 10, 10, 0.95);
  --os-glass-border:  rgba(51, 255, 51, 0.15);
  --font-system:      var(--font-mono);

  /* Reset color blocking — retro stays monochrome CRT green */
  --os-desktop-bg:         #0a0a0a;
  --os-menu-bg:            #1a1a1a;
  --os-menu-border:        #33ff33;
  --os-menu-text:          #33ff33;
  --os-dock-bg:            #1a1a1a;
  --os-dock-border:        #33ff33;
  --os-titlebar-bg:        #222222;
  --os-titlebar-text:      #33ff33;
  --os-titlebar-border:    #33ff33;
  --os-titlebar-inactive:  #1a1a1a;
  --os-titlebar-text-inactive: #119911;
}