/* ============================================================
   Paul Reinhardt Design System — Colors & Typography
   Dark terminal / backend-geek aesthetic
   ============================================================ */

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

/* Brand display font — York White Letter (stencil block caps) */
@font-face {
  font-family: 'YorkWhiteLetter';
  src: url('fonts/yorkwhiteletter.otf') format('opentype'),
       url('fonts/yorkwhiteletter.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   COLOR TOKENS — Base Palette
   ============================================================ */
:root {
  /* Backgrounds */
  --bg:          #080b10;   /* Page background — deep dark navy */
  --bg-elevated: #0c1018;   /* Slightly elevated (modals, overlays) */
  --surface:     #0f1520;   /* Card / section surfaces */
  --surface-2:   #162030;   /* Elevated cards, hover surfaces */
  --surface-3:   #1c2940;   /* Active states, selected items */

  /* Borders */
  --border:      #1e2d45;   /* Default border */
  --border-2:    #263d5e;   /* Emphasized border */

  /* Primary — Terminal Green-Teal */
  --primary:        #00e5a0;
  --primary-dim:    #00b87e;
  --primary-glow:   rgba(0, 229, 160, 0.15);
  --primary-subtle: rgba(0, 229, 160, 0.08);

  /* Secondary — Purple (evolved from old #8e44ad) */
  --secondary:        #7c3aed;
  --secondary-bright: #a855f7;
  --secondary-dim:    #5b21b6;
  --secondary-glow:   rgba(124, 58, 237, 0.15);
  --secondary-subtle: rgba(124, 58, 237, 0.08);

  /* Amber — Tags, badges, warnings */
  --amber:        #f59e0b;
  --amber-dim:    #d97706;
  --amber-subtle: rgba(245, 158, 11, 0.10);

  /* Semantic */
  --success:  #22c55e;
  --error:    #ef4444;
  --warning:  #f59e0b;
  --info:     #38bdf8;

  /* Text */
  --fg-1: #e2ecf8;   /* Primary text — near white */
  --fg-2: #8ba3be;   /* Secondary text — muted blue-grey */
  --fg-3: #4a6278;   /* Disabled / placeholder */
  --fg-4: #2e4260;   /* Very muted — line numbers, subtle labels */

  /* Code specific */
  --code-string:   #c4b5fd;   /* Purple strings */
  --code-keyword:  #00e5a0;   /* Green keywords */
  --code-comment:  #4a6278;   /* Grey comments */
  --code-number:   #f59e0b;   /* Amber numbers */
  --code-function: #38bdf8;   /* Blue functions */
}

/* ============================================================
   COLOR TOKENS — Semantic
   ============================================================ */
:root {
  --color-bg:              var(--bg);
  --color-surface:         var(--surface);
  --color-surface-hover:   var(--surface-2);
  --color-border:          var(--border);
  --color-border-focus:    var(--primary);

  --color-text:            var(--fg-1);
  --color-text-muted:      var(--fg-2);
  --color-text-disabled:   var(--fg-3);

  --color-link:            var(--primary);
  --color-link-hover:      #33ffb8;

  --color-accent:          var(--primary);
  --color-accent-2:        var(--secondary-bright);

  --color-tag-bg:          var(--amber-subtle);
  --color-tag-text:        var(--amber);

  --color-card-bg:         var(--surface);
  --color-card-border:     var(--border);
  --color-card-hover-border: var(--primary);
}

/* ============================================================
   TYPOGRAPHY TOKENS
   ============================================================ */
:root {
  --font-display: 'YorkWhiteLetter', 'Impact', sans-serif; /* brand display — stencil block caps */
  --font-mono:   'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --font-sans:   'IBM Plex Sans', 'Inter', system-ui, sans-serif;
  --font-code:   'JetBrains Mono', monospace;

  /* Scale */
  --text-display:  clamp(2.5rem, 5vw, 4rem);    /* 40–64px */
  --text-h1:       clamp(1.75rem, 3vw, 2.5rem); /* 28–40px */
  --text-h2:       clamp(1.375rem, 2vw, 1.75rem); /* 22–28px */
  --text-h3:       1.125rem;   /* 18px */
  --text-body:     1rem;       /* 16px */
  --text-sm:       0.875rem;   /* 14px */
  --text-xs:       0.75rem;    /* 12px */
  --text-micro:    0.6875rem;  /* 11px */

  /* Weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.12em;
}

/* ============================================================
   SPACING TOKENS
   ============================================================ */
:root {
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --section-padding-y: var(--space-20);
  --section-padding-x: var(--space-6);
  --content-max-width: 1100px;
  --card-padding: var(--space-6);
  --nav-height: 60px;
}

/* ============================================================
   BORDER RADIUS TOKENS
   ============================================================ */
:root {
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:  12px;
  --radius-full: 9999px;
}

/* ============================================================
   SHADOW / GLOW TOKENS
   ============================================================ */
:root {
  --glow-primary:   0 0 20px rgba(0, 229, 160, 0.20);
  --glow-secondary: 0 0 20px rgba(124, 58, 237, 0.20);
  --focus-ring:     0 0 0 2px rgba(0, 229, 160, 0.35);
  --card-shadow:    none; /* No drop shadows — borders only */
}

/* ============================================================
   ANIMATION TOKENS
   ============================================================ */
:root {
  --ease-default: ease;
  --ease-out:     ease-out;
  --duration-fast:   100ms;
  --duration-normal: 150ms;
  --duration-slow:   300ms;
}

/* ============================================================
   BASE SEMANTIC STYLES
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — monospace, terminal feel */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-mono);
  font-weight: var(--weight-semi);
  line-height: var(--leading-tight);
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4) 0;
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

.display {
  font-family: var(--font-mono);
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

/* Terminal-style display — brand moment */
.terminal-display {
  font-family: var(--font-mono);
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  color: var(--fg-1);
  line-height: 1.15;
}
.terminal-display .bracket { color: var(--primary); }
.terminal-display .prompt  { color: var(--secondary-bright); }
.terminal-display .name    { color: var(--fg-1); }

/* York White Letter display — hero name mark */
.brand-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  color: var(--fg-1);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

p {
  margin: 0 0 var(--space-4) 0;
  color: var(--fg-2);
  line-height: var(--leading-normal);
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--duration-normal) var(--ease-out);
}
a:hover { color: var(--color-link-hover); }

code, kbd, samp {
  font-family: var(--font-code);
  font-size: 0.9em;
  color: var(--code-keyword);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
}

pre {
  font-family: var(--font-code);
  font-size: var(--text-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  overflow-x: auto;
  color: var(--fg-1);
  line-height: 1.7;
}

strong { color: var(--fg-1); font-weight: var(--weight-semi); }
em     { color: var(--secondary-bright); font-style: italic; }

small {
  font-size: var(--text-xs);
  color: var(--fg-3);
}

/* Labels / tags / chips */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-tag-text);
  background: var(--color-tag-bg);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Section label (before section titles) */
.section-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--primary);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
  display: block;
}

/* Cursor blink */
.cursor::after {
  content: '▊';
  color: var(--primary);
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}