/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS — shadyportfol.io
   Single source of truth for typography, colors, spacing, borders.
   Import this file FIRST in index.html. All components reference
   these variables. Change a value here → it updates everywhere.
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ── FONTS ──────────────────────────────────────────────────
     Rule: Maximum 2 font families + 1 monospace for terminal.
     W95FA    = Windows 95 system font (body, UI, labels)
     Silkscreen = Pixel display font (titlebars, headings, LED)
     Courier New = Terminal/bot output (never use as body text)
  ──────────────────────────────────────────────────────────── */
  --font-system:      'W95FA', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-display:     'Silkscreen', monospace;
  --font-terminal:    'Courier New', monospace;
  --font-led:         'MineCount', monospace;  /* Minesweeper LED only */

  /* ── TYPE SCALE ─────────────────────────────────────────────
     Base = 13px (authentic W95). Scale up for headings,
     down for fine print. No unit-less values — always px.
  ──────────────────────────────────────────────────────────── */
  --text-2xs:         9px;
  --text-xs:          10px;
  --text-sm:          11px;
  --text-base:        13px;    /* W95 system default */
  --text-md:          14px;
  --text-lg:          16px;
  --text-xl:          18px;
  --text-2xl:         24px;
  --text-3xl:         32px;

  /* Line height */
  --leading-tight:    1.1;
  --leading-normal:   1.4;
  --leading-relaxed:  1.6;

  /* ── COLORS — W95 SYSTEM ────────────────────────────────────
     The classic Windows 95 palette. These are non-negotiable
     for the OS chrome. Do not change unless reskinning the
     entire W95 aesthetic.
  ──────────────────────────────────────────────────────────── */
  /* Surface */
  --w95-bg:           #c0c0c0;    /* Window background, buttons, panels */
  --w95-bg-dark:      #808080;    /* Sunken borders, disabled text */
  --w95-bg-light:     #dfdfdf;    /* Raised inner highlights */
  --w95-bg-white:     #ffffff;    /* Input fields, content areas */
  --w95-desktop:      #008080;    /* Desktop teal */

  /* Borders — the 3D illusion */
  --w95-border-light: #ffffff;    /* Top-left of raised elements */
  --w95-border-dark:  #808080;    /* Bottom-right of raised elements */
  --w95-border-shadow:#000000;    /* Deepest shadow edge */

  /* Titlebar */
  --w95-title-active-start: #000080;
  --w95-title-active-end:   #1084d0;
  --w95-title-active:       #000080;  /* Alias used in gradients */
  --w95-title-grad-end:     #1084d0;  /* Alias used in gradients */
  --w95-title-text:         #ffffff;

  /* Text */
  --w95-text:         #000000;
  --w95-text-disabled:#808080;
  --w95-text-white:   #ffffff;

  /* Selection / hover */
  --w95-selection:      #000080;    /* Menu hover, selected items */
  --w95-selection-text: #ffffff;
  --w95-highlight:      #000080;    /* Alias for selection */
  --w95-highlight-text: #ffffff;    /* Alias for selection text */
  --w95-hilight:        #000080;    /* Legacy alias */

  /* Button chrome */
  --w95-btn-face:     #c0c0c0;
  --w95-btn-hilight:  #ffffff;
  --w95-btn-shadow:   #808080;
  --w95-btn-text:     #000000;

  /* Content areas */
  --w95-field:        #ffffff;    /* Input fields, list backgrounds */
  --w95-field-text:   #000000;
  --w95-window:       #ffffff;

  /* Shorthand aliases */
  --w95-white:        #ffffff;
  --w95-black:        #000000;
  --w95-light:        #dfdfdf;
  --w95-lightest:     #ffffff;
  --w95-dark:         #808080;
  --w95-darkest:      #000000;

  /* Icon / folder palette */
  --w95-folder-top:     #c8a800;
  --w95-folder-body:    #ffdd44;
  --w95-folder-shadow:  #b89800;
  --w95-folder-ridge:   #eebb00;
  --w95-doc-border:     #808080;
  --w95-doc-title-line: #000080;

  /* Misc UI */
  --w95-avatar-bg:      #0d0d0d;
  --w95-bubble-bg:      #000080;
  --w95-bubble-text:    #ffffff;
  --w95-cursor-color:   #ffffff;
  --w95-yellow-hl:      #ffff00;
  --w95-green-dot:      #00cc00;
  --w95-gray-dot:       #808080;
  --w95-secure-green:   #00ff00;
  --w95-secure-dim:     #006600;
  --w95-dos-bg:         #0d0d0d;
  --w95-dos-text:       #00ff00;
  --w95-bar-fill:       #000080;

  /* ── COLORS — BOOTH / TERMINAL ──────────────────────────────
     The security bot terminal. Green-on-black DOS aesthetic.
  ──────────────────────────────────────────────────────────── */
  --booth-bg:         #0d0d0d;    /* Terminal background */
  --booth-text:       #33ff33;    /* Primary terminal green */
  --booth-text-dim:   #1a8c1a;   /* Dimmed terminal text */
  --booth-border:     #33ff33;    /* Terminal borders */
  --booth-glow:       rgba(51, 255, 51, 0.2); /* Subtle glow */
  --booth-user-bg:    rgba(51, 255, 51, 0.15); /* User message bg */

  /* ── COLORS — SECURITY STATES ───────────────────────────────
     The security bar dot cycles through these states.
  ──────────────────────────────────────────────────────────── */
  --sec-gray:         #A5A5A5;    /* State 0: locked/offline */
  --sec-green:        #00ff00;    /* State 1: secure, post-login */
  --sec-orange:       #cc6600;    /* State 2: warning, folder opened */
  --sec-red:          #d93d3d;    /* State 3: breach */
  --sec-red-bright:   #ff0000;    /* State 3: flash */

  /* ── COLORS — GAMES ─────────────────────────────────────────
     Game-specific palette that doesn't bleed into the main UI.
  ──────────────────────────────────────────────────────────── */
  /* Minesweeper */
  --ms-led-bg:        #000000;
  --ms-led-ghost:     #3a0800;
  --ms-led-active:    #e83000;
  --ms-smiley:        #ffff00;
  --ms-mine-hit:      #ff0000;
  --ms-safe:          #00cc00;

  /* Snake (Nokia LCD) */
  --sn-lcd-bg:        #9bbc0f;
  --sn-lcd-pixel:     #0f380f;
  --sn-lcd-light:     #8bac0f;

  /* Solitaire */
  --sol-felt:         #008000;
  --sol-card-white:   #ffffff;
  --sol-card-red:     #cc0000;
  --sol-card-black:   #000000;
  --sol-card-back-bg: #000066;

  /* ── COLORS — ACCENT / FEEDBACK ─────────────────────────────
     Used sparingly for warnings, errors, trust states.
  ──────────────────────────────────────────────────────────── */
  --color-error:      #ff0000;
  --color-warning:    #ffcc00;
  --color-success:    #00ff00;
  --color-link:       #0000ff;    /* Classic W95 hyperlink blue */

  /* ── SPACING ────────────────────────────────────────────────
     4px base unit. Everything is a multiple of 4.
     Use these instead of magic numbers.
  ──────────────────────────────────────────────────────────── */
  --space-1:          2px;
  --space-2:          4px;
  --space-3:          6px;
  --space-4:          8px;
  --space-5:          10px;
  --space-6:          12px;
  --space-8:          16px;
  --space-10:         20px;
  --space-12:         24px;
  --space-16:         32px;

  /* Component-specific spacing */
  --pad-button:       3px 8px;    /* Standard W95 button padding */
  --pad-input:        2px 6px;    /* Input field padding */
  --pad-cell:         4px 8px;    /* Table/grid cell padding */
  --pad-panel:        8px;        /* Panel internal padding */

  /* ── BORDERS ────────────────────────────────────────────────
     W95 3D border patterns. Used on buttons, panels, inputs.
  ──────────────────────────────────────────────────────────── */
  --border-raised:    2px solid;  /* border-color set per-element */
  --border-sunken:    2px solid;
  --border-thin:      1px solid #808080;
  --border-radius:    0px;        /* W95 has NO border radius. Ever. */

  /* ── BREAKPOINTS ────────────────────────────────────────────
     D_V = Desktop (>= 992px): two-column layout, taskbar
     M_V = Mobile/Tablet (<= 991px): single column, stacked
     XS  = Small phones (<= 480px): tighter spacing
     XXS = Mini phones (<= 375px): minimum viable layout
  ──────────────────────────────────────────────────────────── */
  /* These are documented here but used in @media queries, not as variables.
     CSS custom properties can't be used in media queries.
     
     @media (min-width: 992px)  → D_V (Desktop)
     @media (max-width: 991px)  → M_V (Tablet + Phone)
     @media (max-width: 480px)  → XS  (Small phone)
     @media (max-width: 375px)  → XXS (Mini phone)
  */

  /* ── Z-INDEX SCALE ──────────────────────────────────────────
     Predictable stacking. No magic z-index wars.
  ──────────────────────────────────────────────────────────── */
  --z-base:           1;          /* Default positioned elements */
  --z-icons:          5;          /* Desktop icons, scanline overlay */
  --z-popup:          10;         /* Tooltips, explorer popup */
  --z-game:           15;         /* Game windows */
  --z-modal:          50;         /* Modal dialogs, sys32 popups */
  --z-boot:           100;        /* Login screen */
  --z-loading:        200;        /* Explorer body shadow, explorer popup */
  --z-taskbar:        210;        /* Explorer taskbar — above body bevel so Start menu clears it */
  --z-menubar:        215;        /* Explorer menu bar — above body bevel so dropdowns clear it */
  --z-start-menu:     220;        /* Start menu (internal to taskbar context) */
  --z-fg:             230;        /* Focus Group overlay — above taskbar to cover full explorer */
  --z-menu-drop:      260;        /* Dropdown menus (above explorer content) */
  --z-loading-full:   8000;       /* W95 loading overlay */
  --z-file-popup:     9000;       /* File popup overlay */
  --z-overlay:        9999;       /* OverlayManager layer */
  --z-vn:             10000;      /* Visual novel overlay */
  --z-page-load:      20000;      /* Initial page load overlay */

  /* ── ANIMATION ──────────────────────────────────────────────
     Consistent timing across all animations.
  ──────────────────────────────────────────────────────────── */
  --duration-fast:    150ms;
  --duration-normal:  300ms;
  --duration-slow:    600ms;
  --ease-default:     ease;
  --ease-bounce:      cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ── SHADOWS ────────────────────────────────────────────────
     W95 doesn't use soft shadows. These are for overlays/games.
  ──────────────────────────────────────────────────────────── */
  --shadow-window:    3px 3px 0 rgba(0,0,0,0.3);
  --shadow-popup:     4px 4px 0 rgba(0,0,0,0.4);

  /* W95 4-layer chrome shadows — the core bevel illusion.
     Raised  = buttons, windows, panels (default)
     Pressed = :active state of raised elements
     Sunken  = inputs, content wells, screens
     Tab-*   = taskbar tab variants (inner highlight = #fff not #c1c1c1)
  */
  --shadow-raised:      inset -1px -1px 0 #000, inset 1px 1px 0 #c1c1c1, inset -2px -2px 0 #818181, inset 2px 2px 0 #fff;
  --shadow-pressed:     inset 1px 1px 0 #000, inset -1px -1px 0 #c1c1c1, inset 2px 2px 0 #818181, inset -2px -2px 0 #fff;
  --shadow-sunken:      inset 1px 1px 0 #808080, inset -1px -1px 0 #fff, inset 2px 2px 0 #000, inset -2px -2px 0 #c1c1c1;
  --shadow-tab-raised:  inset -1px -1px 0 #000, inset 1px 1px 0 #fff, inset -2px -2px 0 #818181, inset 2px 2px 0 #c1c1c1;
  --shadow-tab-pressed: inset 1px 1px 0 #000, inset -1px -1px 0 #fff, inset 2px 2px 0 #818181, inset -2px -2px 0 #c1c1c1;
}

/* ── BREAKPOINT OVERRIDES ─────────────────────────────────────
   Adjust tokens per breakpoint. Only override what changes.
──────────────────────────────────────────────────────────── */

/* M_V: Tablet + Phone */
@media (max-width: 991px) {
  :root {
    --text-base:      12px;
    --text-md:        13px;
    --text-lg:        14px;
    --pad-button:     2px 6px;
    --pad-panel:      6px;
  }
}

/* XS: Small phone */
@media (max-width: 480px) {
  :root {
    --text-base:      11px;
    --text-md:        12px;
    --text-sm:        10px;
    --pad-button:     2px 5px;
    --pad-panel:      4px;
    --space-4:        6px;
    --space-6:        8px;
  }
}

/* XXS: Mini phone */
@media (max-width: 375px) {
  :root {
    --text-base:      10px;
    --text-md:        11px;
    --text-sm:        9px;
  }
}