/*
  Andy Freeman Portfolio — Design Tokens
  Brand: Console — IBM Carbon g100 (dark) with an "event horizon" twist.
  Canvas #161616, void #000, one interactive hue (horizon cyan #33b1ff),
  square corners everywhere, IBM Plex type family.
  Source: console-ds/tokens/* (vendored Console design system).
*/

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=IBM+Plex+Sans:wght@300;400;450;600&family=IBM+Plex+Serif:ital,wght@0,300;0,400;1,300;1,400&display=swap");

:root {
  /* ============ PRIMARY: Console (near-black + horizon cyan) ============ */
  --bg:           #161616;
  --bg-deep:      #000000;
  --surface:      #262626;
  --surface-2:    #393939;
  --surface-deep: #000000;

  --border:       #393939;
  --border-soft:  #262626;

  /* Text hierarchy */
  --fg-1:         #f4f4f4;  /* primary */
  --fg-2:         #c6c6c6;  /* muted / supporting */
  --fg-3:         #6f6f6f;  /* dim / decorative */
  --fg-on-accent: #000000;

  /* Brand accent — horizon cyan */
  --accent:       #33b1ff;
  --accent-hover: #82cfff;
  --accent-press: #1192e8;
  --accent-glow:  rgba(51, 177, 255, 0.22);
  --accent-soft:  rgba(51, 177, 255, 0.10);
  --accent-2:     #3ddbd9;  /* tier-l2 teal, used as the secondary gradient stop */
  --gradient-brand: linear-gradient(90deg, rgba(61,219,217,0) 0%, #3ddbd9 35%, #e5f6ff 50%, #33b1ff 65%, rgba(51,177,255,0) 100%);

  /* Tier spectrum — architecture layers encoded in color */
  --tier-l1: #c6c6c6;
  --tier-l2: #3ddbd9;
  --tier-l3: #42be65;

  /* Semantic */
  --success: #42be65;
  --danger:  #fa4d56;
  --warning: #f1c21b;
  --info:    #4589ff;

  /* ============ Typography ============ */
  --font-display: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", Courier, monospace;
  --font-serif:   "IBM Plex Serif", "Georgia", Times, serif; /* the stance quotation only */

  /* Type scale (px) */
  --fs-stat:    48px;
  --fs-hero:    44px;
  --fs-title:   32px;
  --fs-section: 24px;
  --fs-card:    18px;
  --fs-body:    16px;
  --fs-caption: 13px;
  --fs-eyebrow: 11px;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  450;
  --fw-semi:    600;
  --fw-bold:    600;
  --fw-black:   600;

  --lh-tight:    1.0;
  --lh-snug:     1.05;
  --lh-heading:  1.12;
  --lh-card:     1.2;
  --lh-body:     1.6;
  --lh-caption:  1.4;

  --tracking-hero:    -0.96px;
  --tracking-title:   -0.3px;
  --tracking-eyebrow: 0.64px;
  --tracking-label:   0.64px;

  /* ============ Spacing — 8px grid ============ */
  --sp-xs:   8px;
  --sp-sm:  16px;
  --sp-md:  24px;
  --sp-lg:  32px;
  --sp-xl:  48px;
  --sp-2xl: 64px;
  --sp-3xl: 80px;

  /* ============ Radius — Console is square everywhere ============ */
  --radius-xs: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;   /* card default */
  --radius-xl: 0;
  --radius-pill: 999px; /* status dots and tag pills only */

  /* ============ Borders ============ */
  --border-w-1: 1px;
  --border-accent: 3px solid var(--accent); /* signal stripe */

  /* ============ Shadows — no glows/halos on color; overlay only ============ */
  --shadow-soft:  none;
  --shadow-glow:  none;
  --shadow-pop:   0 2px 6px rgba(0, 0, 0, 0.8);

  /* ============ Motion — productive 70-150ms, expressive 400ms ============ */
  --ease-out:     cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-in-out:  cubic-bezier(0.4, 0.14, 0.3, 1);
  --dur-fast: 110ms;
  --dur-base: 150ms;
  --dur-slow: 400ms;
}

/* ============ ACCENT — Console ships one interactive hue ============
   Console has no selectable accent ramps — horizon cyan is the only
   interactive color, permanently. The switcher below exists only so any
   surviving [data-accent] attribute resolves to the same cyan values;
   there is no ember/indigo/cobalt/mint ramp to opt into. */
:root[data-accent="ember"],
:root[data-accent="indigo"],
:root[data-accent="cobalt"],
:root[data-accent="mint"] {
  --accent:       #33b1ff;
  --accent-hover: #82cfff;
  --accent-press: #1192e8;
  --accent-glow:  rgba(51, 177, 255, 0.22);
  --accent-soft:  rgba(51, 177, 255, 0.10);
  --accent-2:     #3ddbd9;
  --gradient-brand: linear-gradient(90deg, rgba(61,219,217,0) 0%, #3ddbd9 35%, #e5f6ff 50%, #33b1ff 65%, rgba(51,177,255,0) 100%);
}

/* ============ LIGHT — retired ============
   Console is dark-only (Carbon g100). [data-mode="light"] is kept as a
   no-op selector (rather than deleted) so any stray attribute on <html>
   does not silently fall through to unstyled browser defaults; it
   resolves to the same dark palette as :root. */
[data-mode="light"] {
  --bg:           #161616;
  --bg-deep:      #000000;
  --surface:      #262626;
  --surface-2:    #393939;
  --surface-deep: #000000;
  --border:       #393939;
  --border-soft:  #262626;

  --fg-1: #f4f4f4;
  --fg-2: #c6c6c6;
  --fg-3: #6f6f6f;

  --accent:       #33b1ff;
  --accent-hover: #82cfff;
  --accent-press: #1192e8;
  --accent-glow:  rgba(51, 177, 255, 0.22);
  --accent-soft:  rgba(51, 177, 255, 0.10);
  --accent-2:     #3ddbd9;
  --gradient-brand: linear-gradient(90deg, rgba(61,219,217,0) 0%, #3ddbd9 35%, #e5f6ff 50%, #33b1ff 65%, rgba(51,177,255,0) 100%);

  --success: #42be65;
  --danger:  #fa4d56;
  --warning: #f1c21b;
  --info:    #4589ff;

  --shadow-soft: none;
  --shadow-pop:  0 2px 6px rgba(0, 0, 0, 0.8);
  --shadow-glow: none;
}

/* ============ Semantic element styles ============ */
html { background: var(--bg); color: var(--fg-1); }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-light);
  letter-spacing: var(--tracking-hero);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-title);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: var(--fg-1);
}
h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-card);
  font-weight: var(--fw-semi);
  line-height: var(--lh-card);
  color: var(--fg-1);
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.caption {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: 0.32px;
  line-height: var(--lh-caption);
  color: var(--fg-2);
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-hover); border-bottom-color: currentColor; }