/* ============================================================================
   MACSIIMACSITO — Design System Foundations
   "16-bit dusk arcade" — retro pixel-art portfolio for a web-dev engineer
   Colors + Typography tokens (base + semantic)
   ----------------------------------------------------------------------------
   NOTE ON FONTS: Bundled local font files are not included (could not be
   fetched in this environment). We load the pixel typefaces from Google Fonts.
   All three are open-source (SIL OFL). Swap the @import for local @font-face
   declarations if you want a fully offline system.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Silkscreen:wght@400;700&display=swap');

:root {
  /* ---------------------------------------------------------------------- */
  /* COLOR — base palette (the arcade-dusk ramp)                            */
  /* ---------------------------------------------------------------------- */

  /* Backgrounds — the void behind the CRT, getting lighter as it raises */
  --bg-0:  #0e0e23;   /* deepest night — page background */
  --bg-1:  #181838;   /* panel / card surface */
  --bg-2:  #24244f;   /* raised surface / inset wells flipped */
  --bg-3:  #32326a;   /* hover surface / borders-on-dark */

  /* Ink — text on dark */
  --ink:        #f5f4ff;   /* primary text — near-white phosphor */
  --ink-dim:    #aeacdb;   /* secondary text */
  --ink-faint:  #6f6da6;   /* captions / disabled / placeholder */

  /* Accents — the arcade cabinet palette */
  --pink:    #ff4d77;   /* PRIMARY — arcade hot-pink/red (1-coin, CTA) */
  --pink-d:  #d62f57;   /* pink pressed/shadow */
  --gold:    #ffcb3d;   /* coin gold — highlight / warning */
  --gold-d:  #d9a318;
  --green:   #3fe08f;   /* 1-up green — success / online */
  --green-d: #1fb56b;
  --cyan:    #45c8ff;   /* portal sky — links / info */
  --cyan-d:  #1f9ad6;
  --purple:  #9b6bff;   /* magic — tertiary / badges */
  --purple-d:#7444e0;

  /* Pure values for pixel borders/shadows */
  --black:  #07060f;
  --white:  #ffffff;

  /* ---------------------------------------------------------------------- */
  /* COLOR — semantic roles                                                 */
  /* ---------------------------------------------------------------------- */
  --color-bg:            var(--bg-0);
  --color-surface:       var(--bg-1);
  --color-surface-raise: var(--bg-2);
  --color-text:          var(--ink);
  --color-text-muted:    var(--ink-dim);
  --color-text-faint:    var(--ink-faint);

  --color-primary:       var(--pink);
  --color-primary-press: var(--pink-d);
  --color-accent:        var(--gold);
  --color-link:          var(--cyan);

  --color-success:       var(--green);
  --color-warning:       var(--gold);
  --color-danger:        var(--pink);
  --color-info:          var(--cyan);

  --color-border:        var(--black);   /* pixel outlines are near-black */
  --color-border-soft:   var(--bg-3);    /* low-contrast dividers */

  /* ---------------------------------------------------------------------- */
  /* TYPE — families                                                        */
  /* ---------------------------------------------------------------------- */
  --font-display: 'Press Start 2P', 'Courier New', monospace; /* chunky 8-bit */
  --font-body:    'VT323', 'Courier New', monospace;          /* CRT terminal */
  --font-label:   'Silkscreen', 'VT323', monospace;           /* small caps labels */
  --font-mono:    'VT323', ui-monospace, monospace;           /* code */

  /* ---------------------------------------------------------------------- */
  /* TYPE — base scale                                                      */
  /* VT323 runs SMALL per-px, so body sits at 20-22px. Press Start 2P runs  */
  /* LARGE/wide, so display sizes are comparatively modest in px.           */
  /* ---------------------------------------------------------------------- */
  --text-2xs:  12px;
  --text-xs:   16px;
  --text-sm:   18px;
  --text-base: 21px;   /* default body (VT323) */
  --text-lg:   26px;
  --text-xl:   32px;
  --text-2xl:  40px;

  /* Display sizes (intended for Press Start 2P — keep these chunky) */
  --display-sm: 18px;
  --display-md: 28px;
  --display-lg: 40px;
  --display-xl: 56px;

  --leading-tight:  1.1;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* Press Start 2P needs roomier line-height + a touch of tracking control */
  --display-leading: 1.5;
  --tracking-label:  0.12em;  /* Silkscreen labels are spaced out */

  /* ---------------------------------------------------------------------- */
  /* SPACING — 8px pixel grid (the whole system snaps to 8; 4 for tight)    */
  /* ---------------------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  48px;
  --space-7:  64px;
  --space-8:  96px;

  /* ---------------------------------------------------------------------- */
  /* RADII — pixel art has NO rounded corners. Radius is always 0.          */
  /* (token kept for completeness / the rare avatar chip)                   */
  /* ---------------------------------------------------------------------- */
  --radius-none: 0px;
  --radius-chip: 0px;

  /* ---------------------------------------------------------------------- */
  /* BORDERS — chunky, hard, pixel outlines                                 */
  /* ---------------------------------------------------------------------- */
  --border-1: 2px;
  --border-2: 3px;
  --border-3: 4px;   /* default chunky outline */
  --border-w: var(--border-3);

  /* ---------------------------------------------------------------------- */
  /* SHADOWS — HARD offset, ZERO blur. The signature pixel drop-shadow.     */
  /* ---------------------------------------------------------------------- */
  --shadow-sm:  3px 3px 0 0 var(--black);
  --shadow-md:  5px 5px 0 0 var(--black);
  --shadow-lg:  8px 8px 0 0 var(--black);
  /* colored "glow" variants used on accent surfaces */
  --shadow-pink:  5px 5px 0 0 var(--pink-d);
  --shadow-gold:  5px 5px 0 0 var(--gold-d);
  --shadow-green: 5px 5px 0 0 var(--green-d);

  /* ---------------------------------------------------------------------- */
  /* MOTION — snappy + stepped. No smooth eases; everything is arcade-quick */
  /* ---------------------------------------------------------------------- */
  --ease-snap:  steps(2, end);          /* chunky 2-frame transitions */
  --ease-pop:   cubic-bezier(.2,.8,.2,1);
  --dur-fast:   90ms;
  --dur-base:   140ms;
  --blink:      1s steps(2, start) infinite;  /* cursor / press-start blink */
}

/* ============================================================================
   SEMANTIC ELEMENT STYLES
   Apply by setting these on a root container, or use the utility classes.
   Images are pixelated by default — never let a sprite get anti-aliased.
   ========================================================================== */

.ds-root {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: none;       /* keep the pixels crisp */
  font-smooth: never;
}

img, .pixelated { image-rendering: pixelated; image-rendering: crisp-edges; }

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--display-lg);
  line-height: var(--display-leading);
  color: var(--ink);
  font-weight: 400;
  text-shadow: 3px 3px 0 var(--black);
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--display-md);
  line-height: var(--display-leading);
  color: var(--ink);
  font-weight: 400;
  text-shadow: 2px 2px 0 var(--black);
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--display-sm);
  line-height: var(--display-leading);
  color: var(--gold);
  font-weight: 400;
}
p, .p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--ink-dim);
  text-wrap: pretty;
}
.lead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--ink);
  line-height: var(--leading-snug);
}
.label, .eyebrow {
  font-family: var(--font-label);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-faint);
}
code, .code {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--green);
  background: var(--black);
  padding: 0 var(--space-2);
  border: var(--border-1) solid var(--bg-3);
}
a, .link {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
a:hover, .link:hover { color: var(--gold); }

/* ============================================================================
   PIXEL ICONS — Pixelarticons (open-source, 24x24 grid, currentColor)
   loaded from CDN as CSS masks so they inherit text color.
   Usage:  <i class="px-icon" style="--ico:url('PIXELART_BASE/home.svg')"></i>
   Size with font-size or width/height. Color with `color`.
   Base URL:  https://unpkg.com/pixelarticons@1.8.1/svg/<kebab-name>.svg
   ========================================================================== */
.px-icon {
  display: inline-block;
  width: 1em; height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
  vertical-align: -0.125em;
  flex: none;
}

/* ============================================================================
   SIGNATURE SURFACES — drop these on any element
   ========================================================================== */

/* The chunky pixel panel: hard border + hard offset shadow, zero radius */
.px-panel {
  background: var(--bg-1);
  border: var(--border-w) solid var(--black);
  box-shadow: var(--shadow-md);
  border-radius: 0;
}

/* CRT scanline overlay — lay over hero/imagery as a ::after or sibling */
.crt-scanlines {
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.18) 3px,
    rgba(0,0,0,0) 4px
  );
  pointer-events: none;
}

/* Starfield + dither tiles (assets/) — set as repeating backgrounds */
.bg-stars  { background: var(--bg-0) url('assets/bg-stars.png') repeat; background-size: 192px; }
.bg-dither { background-image: url('assets/dither.png'); background-size: 64px; }

/* The classic press-down button motion: travels into its own shadow */
.px-press { transition: transform var(--dur-fast) var(--ease-pop),
                        box-shadow var(--dur-fast) var(--ease-pop); }
.px-press:active { transform: translate(3px, 3px); box-shadow: 0 0 0 0 var(--black); }

/* Blinking element (cursor, PRESS START) */
@keyframes px-blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
.px-blink { animation: px-blink 1s steps(1) infinite; }