/* animux Design System — colors_and_type.css
   Cyberpunk anime tracker. All tokens used across the system.
*/

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root {
  /* ─── BACKGROUND SCALE ───────────────────────────── */
  --bg:          #0a0a0f;   /* page background — near-black, slight blue tint */
  --bg-1:        #0f0f17;   /* alt page background */
  --surface:     #14141c;   /* default elevated surface (cards, rows) */
  --surface-2:   #1c1c28;   /* elevated surface, a step lighter */
  --line:        #23232f;   /* default 1px hairline */
  --line-2:      #2c2c3c;   /* secondary border, slightly more visible */

  /* ─── TEXT SCALE ─────────────────────────────────── */
  --text:        #f4f4f8;   /* primary text — soft white */
  --text-2:      #c4c4d2;   /* secondary text */
  --text-3:      #7a7a8c;   /* tertiary, hints, mono captions */
  --text-4:      #4a4a5c;   /* disabled / faint mono */

  /* ─── ACCENTS ────────────────────────────────────── */
  --cyan:        #00f0ff;   /* PROTAGONIST accent — primary UI, focus, data */
  --cyan-dim:    #00b8c8;   /* hover/pressed cyan */
  --magenta:     #ff2d92;   /* SECONDARY accent — premium, intimate */
  --magenta-dim: #c41f6f;   /* pressed magenta */
  --yellow:      #fcee0c;   /* HIGHLIGHT — Edgerunners yellow, used sparingly for "special" */

  /* ─── SEMANTIC ───────────────────────────────────── */
  --success:     #a8ff60;   /* watched, completed, positive */
  --danger:      #ff3d5a;   /* destructive, reject (NOPE swipe) */
  --warning:     #fcee0c;   /* same as yellow */
  --info:        #00f0ff;   /* same as cyan */

  /* ─── PLATFORM BRAND COLORS ──────────────────────── */
  --p-crunchyroll: #f47521;
  --p-netflix:     #e50914;
  --p-prime:       #00a8e1;
  --p-disney:      #113ccf;
  --p-hidive:      #00b9ae;

  /* ─── TYPE FAMILIES ──────────────────────────────── */
  --display: 'Space Grotesk', system-ui, sans-serif;   /* titles, big numbers */
  --ui:      'Inter', system-ui, sans-serif;            /* body, paragraphs */
  --mono:    'JetBrains Mono', ui-monospace, monospace; /* data, timestamps, IDs, labels */
  --jp:      'Noto Sans JP', system-ui, sans-serif;     /* kanji, decorative */

  /* ─── SPACING (8pt grid) ─────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;

  /* ─── RADIUS (mostly sharp) ──────────────────────── */
  --r-0:  0px;       /* default — sharp HUD corners */
  --r-1:  2px;       /* subtle softening (chips, pills) */
  --r-2:  6px;       /* cards (rare) */
  --r-3:  42px;      /* phone screen */
  --r-4:  52px;      /* phone bezel */

  /* ─── SHADOWS / GLOWS ────────────────────────────── */
  --glow-cyan:    0 0 18px rgba(0,240,255,0.35);
  --glow-cyan-sm: 0 0 8px rgba(0,240,255,0.5);
  --glow-magenta: 0 0 32px rgba(255,45,146,0.25);
  --glow-yellow:  0 0 14px rgba(252,238,12,0.4);
  --shadow-card:  0 30px 60px -20px rgba(0,0,0,0.8);

  /* ─── GRADIENTS ──────────────────────────────────── */
  --grad-premium:  linear-gradient(95deg, #ff2d92 0%, #b438c8 50%, #00f0ff 100%);
  --grad-poster:   linear-gradient(155deg, #1a3b5c 0%, #7eb6d6 55%, #d4e8f5 130%);
  --grad-fade:     linear-gradient(180deg, transparent, rgba(0,0,0,0.92));

  /* ─── EFFECTS ────────────────────────────────────── */
  --scanlines: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.018) 0,
    rgba(255,255,255,0.018) 1px,
    transparent 1px,
    transparent 3px
  );
  --diagonal-stripes: repeating-linear-gradient(
    45deg,
    rgba(0,0,0,0.22) 0 14px,
    rgba(255,255,255,0.04) 14px 28px
  );
}

/* ─── SEMANTIC CLASSES ─────────────────────────────── */

.h1, h1.animux {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--text);
}
.h2, h2.animux {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--text);
}
.h3, h3.animux {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.eyebrow {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-4);
}
.body {
  font-family: var(--ui);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text);
}
.body-sm {
  font-family: var(--ui);
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-2);
}
.data {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-2);
}
.jp-deco {
  font-family: var(--jp);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-3);
}

/* glitch text helper — apply via class + data-text="…" */
.glitch {
  position: relative;
  display: inline-block;
  color: var(--text);
}
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.glitch::before {
  color: var(--magenta);
  transform: translate(-1.2px, 0);
  mix-blend-mode: screen;
  opacity: 0.85;
}
.glitch::after {
  color: var(--cyan);
  transform: translate(1.2px, 0);
  mix-blend-mode: screen;
  opacity: 0.85;
}