/* REWIRE — "Specimen Hologram" design tokens.
   Light, warm lab paper + graphite ink + holographic foil used sparingly.
   Rule: holo colour only appears where the brain is healing or a win happens. */

@font-face { font-family: 'Instrument Serif'; src: url('../fonts/instrument-serif-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; src: url('../fonts/instrument-serif-latin-400-italic.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('../fonts/inter-tight-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }

@property --holo-angle { syntax: '<angle>'; inherits: true; initial-value: 0deg; }

:root {
  /* Paper & ink */
  --paper: #F3F1EC;
  --paper-2: #EAE7E0;
  --card: #FBFAF7;
  --ink: #16161A;
  --ink-2: #4A4A52;
  --ink-3: #8C8B93;
  --line: rgba(22, 22, 26, .12);
  --line-strong: rgba(22, 22, 26, .28);

  /* Holographic spectrum */
  --h-cyan: #00BAFF;
  --h-violet: #785CFF;
  --h-magenta: #FF3DAE;
  --h-mint: #00CD96;
  --holo: conic-gradient(from var(--holo-angle), var(--h-cyan), var(--h-violet), var(--h-magenta), var(--h-mint), var(--h-cyan));
  --holo-linear: linear-gradient(100deg, var(--h-cyan), var(--h-violet) 35%, var(--h-magenta) 65%, var(--h-mint));

  /* Semantics */
  --signal: #FF4D1A;   /* cravings, warnings, relapse */
  --ok: #00A87A;

  /* Type */
  --f-display: 'Instrument Serif', 'Times New Roman', serif;
  --f-ui: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Scale */
  --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-pill: 999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@keyframes holo-spin { to { --holo-angle: 360deg; } }