/* =========================================================================
   MOKKSH PAREKH — Portfolio Design System
   Brutalist hacker. Mono everything. Crimson accent. Zero ornament.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Anton&family=Major+Mono+Display&display=swap');

:root {
  /* ===== CORE PALETTE (DARK / DEFAULT) =====================================
     Black + 4 greys. One crimson accent + status LEDs. That's the whole
     palette. Brutalist hacker = austerity.                                  */

  --bg-0: #050505;          /* page background — true black-ish */
  --bg-1: #0a0a0a;          /* panel base */
  --bg-2: #111111;          /* raised panel / card */
  --bg-3: #1a1a1a;          /* hover surface, inset */
  --bg-4: #232323;          /* highest elevation */

  --fg-0: #e8e8e8;          /* primary text */
  --fg-1: #a8a8a8;          /* secondary */
  --fg-2: #6a6a6a;          /* tertiary / labels */
  --fg-3: #3a3a3a;          /* muted, disabled */

  --line-0: #1f1f1f;        /* hairline divider */
  --line-1: #2a2a2a;        /* default border */
  --line-2: #3a3a3a;        /* emphasized border */
  --line-3: #555555;        /* hover/focus border */

  /* ===== ACCENT — crimson, used sparingly ================================ */
  --accent:        #dc2626; /* primary red */
  --accent-dim:    #991b1b; /* pressed / shadow */
  --accent-bright: #ef4444; /* hover / glow */
  --accent-deep:   #450a0a; /* very dim, used as background tint */

  /* ===== STATUS LEDS (server-rack lights) =============================== */
  --led-green:  #22c55e;
  --led-amber:  #f59e0b;
  --led-red:    #dc2626;
  --led-blue:   #3b82f6;
  --led-off:    #1a1a1a;

  /* ===== SEMANTIC ALIASES ================================================ */
  --canvas:       var(--bg-0);
  --panel:        var(--bg-1);
  --card:         var(--bg-2);
  --hover:        var(--bg-3);
  --text:         var(--fg-0);
  --text-muted:   var(--fg-1);
  --text-dim:     var(--fg-2);
  --text-faint:   var(--fg-3);
  --border:       var(--line-1);
  --border-strong:var(--line-2);
  --rule:         var(--line-0);

  /* ===== TYPOGRAPHY ====================================================== */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-display: 'Anton', 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-hero:    'Major Mono Display', var(--font-mono);

  /* Type scale (uses rem; root 16px) */
  --t-xs:    11px;
  --t-sm:    12px;
  --t-base:  13px;          /* base body — terminal sized */
  --t-md:    14px;
  --t-lg:    16px;
  --t-xl:    20px;
  --t-2xl:   28px;
  --t-3xl:   40px;
  --t-4xl:   56px;
  --t-5xl:   80px;
  --t-6xl:   120px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.12em;
  --tracking-widest:   0.24em;

  /* ===== SPACING SCALE (4px base) ======================================== */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ===== RADII ===========================================================
     Brutalist = sharp. 0 default; 2px max for hardware-ish chrome.         */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;       /* reserved for LEDs and cable jacks */

  /* ===== BORDERS ========================================================= */
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 3px;

  /* ===== SHADOWS / GLOW ==================================================
     Brutalist = no soft shadows. Use hard offset shadows + LED glow.       */
  --shadow-hard:   3px 3px 0 0 var(--accent-deep);
  --shadow-card:   inset 0 0 0 1px var(--line-1);
  --shadow-inset:  inset 0 1px 0 0 rgba(255,255,255,0.02);
  --glow-red:      0 0 8px rgba(220, 38, 38, 0.55);
  --glow-red-soft: 0 0 16px rgba(220, 38, 38, 0.35);
  --glow-green:    0 0 6px rgba(34, 197, 94, 0.65);
  --glow-amber:    0 0 6px rgba(245, 158, 11, 0.65);

  /* ===== MOTION ==========================================================
     Sharp, mechanical easings. No bouncy springs.                          */
  --ease-mech:     cubic-bezier(0.7, 0, 0.3, 1);   /* default */
  --ease-step:     steps(8, end);                    /* terminal stutter */
  --ease-linear:   linear;
  --dur-instant:   80ms;
  --dur-fast:      160ms;
  --dur-base:      240ms;
  --dur-slow:      480ms;
  --dur-cable:     900ms;
  --dur-boot:      2400ms;

  /* ===== LAYOUT ========================================================== */
  --max-w:       1440px;
  --gutter:      48px;
  --rule-w:      1px;

  /* ===== Z-INDEX ========================================================= */
  --z-bg:      0;
  --z-base:    1;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   1000;
  --z-toast:   2000;

  /* ===== HARDWARE — server / rack / monitor surfaces =====================
     Defined here so they invert cleanly for light theme.                  */
  --hw-rack-bg:      #0a0a0a;         /* rack chassis interior */
  --hw-rack-frame:   #2a2a2a;         /* rack outer rail */
  --hw-rack-rail:    #1a1a1a;         /* rack inner rail strip */
  --hw-rack-cap:     #1a1a1a;         /* rack top/bottom plate */
  --hw-rack-bolt:    #444;            /* mounting bolts */
  --hw-server-face-a:#1a1a1a;
  --hw-server-face-b:#0f0f0f;
  --hw-server-edge:  #3a3a3a;
  --hw-server-side:  #0a0a0a;
  --hw-server-top:   #0e0e0e;
  --hw-unit-a:       #161616;         /* alternating 1U rows */
  --hw-unit-b:       #131313;
  --hw-unit-screen:  #050505;
  --hw-unit-border:  #050505;
  --hw-unit-bay:     #0c0c0c;
  --hw-unit-text:    #444;
}

/* =========================================================================
   LIGHT THEME OVERRIDE
   Inverts greys; keeps crimson the same. Still brutalist; less hacker.
   Trigger by setting [data-theme="light"] on <html> or <body>.
   ========================================================================= */
[data-theme="light"] {
  --bg-0: #f4f4f1;
  --bg-1: #ebebe6;
  --bg-2: #ffffff;
  --bg-3: #e2e2dc;
  --bg-4: #d4d4cc;

  --fg-0: #0a0a0a;
  --fg-1: #2a2a2a;
  --fg-2: #555555;
  --fg-3: #888888;

  --line-0: #d8d8d2;
  --line-1: #bcbcb4;
  --line-2: #888880;
  --line-3: #4a4a44;

  --accent-deep: #fde2e2;

  --shadow-hard: 3px 3px 0 0 #0a0a0a;
  --shadow-card: inset 0 0 0 1px var(--line-1);
  --glow-red:    0 0 0 1px rgba(220, 38, 38, 0.0);  /* disabled in light */

  /* Hardware — brushed metal aesthetic for light mode */
  --hw-rack-bg:      #d0d0c8;
  --hw-rack-frame:   #555550;
  --hw-rack-rail:    #b8b8b0;
  --hw-rack-cap:     #8a8a82;
  --hw-rack-bolt:    #2a2a26;
  --hw-server-face-a:#fafaf6;
  --hw-server-face-b:#e8e8e0;
  --hw-server-edge:  #555550;
  --hw-server-side:  #999990;
  --hw-server-top:   #aaaaa0;
  --hw-unit-a:       #f0f0e8;
  --hw-unit-b:       #e4e4dc;
  --hw-unit-screen:  #050505;          /* screens always dark — they're CRTs */
  --hw-unit-border:  #888880;
  --hw-unit-bay:     #c8c8c0;
  --hw-unit-text:    #555550;
}

/* =========================================================================
   SEMANTIC TEXT ELEMENTS — defaults for raw HTML inside the system
   ========================================================================= */
.ds-root, .ds-root * { box-sizing: border-box; }

.ds-root {
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.h-display, .ds-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--text);
}

.ds-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.ds-h3 {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--t-md);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text);
}

.ds-h4, .label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-dim);
}

.ds-p, p.ds-p {
  font-family: var(--font-mono);
  font-size: var(--t-base);
  line-height: var(--lh-loose);
  color: var(--text-muted);
  max-width: 64ch;
}

.ds-code, code.ds-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-3);
  border: 1px solid var(--line-1);
  padding: 1px 6px;
  color: var(--accent-bright);
}

.ds-kbd {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  padding: 2px 6px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--text-muted);
  border-bottom-width: 2px;
}

.ds-link {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease-mech),
              border-color var(--dur-fast) var(--ease-mech);
}
.ds-link:hover { color: var(--accent-bright); border-color: var(--accent-bright); }

/* ===== Tactical prefix glyph used before section IDs =====
   e.g.  ▸ 02 / CREDENTIALS                                                */
.ds-prefix::before {
  content: "▸ ";
  color: var(--accent);
}

/* ===== Selection — crimson on black, since we'll disable selection
   on the live portfolio anyway, this is for cards/dev only ===== */
::selection { background: var(--accent); color: #000; }