/* Free Parameter LLC: design tokens.
   Near-black indigo field, ice-white type, cyan/periwinkle as the cool family, one mint accent used sparingly.
   Every color is a token; components only use tokens. */

@font-face { font-family: "FP Mono"; src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "FP Mono"; src: url("../fonts/JetBrainsMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "FP Mono"; src: url("../fonts/JetBrainsMono-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "FP Mono"; src: url("../fonts/JetBrainsMono-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  color-scheme: dark;

  /* field: near-black indigo */
  --bg-deep:   #06060c;
  --bg:        #0b0c16;
  --bg-raise:  #151828;
  --bg-glass:  color-mix(in oklab, #151828 58%, transparent);
  --line:      color-mix(in oklab, #829dd4 18%, transparent);
  --line-hot:  color-mix(in oklab, #82fb9c 55%, transparent);

  /* ink: ice */
  --fg:        #ddf7ff;   /* headlines, terminal text */
  --fg-soft:   #b5c5db;   /* body copy */
  --fg-dim:    #6a6e95;   /* meta, captions */

  /* cool family */
  --cool:      #829dd4;   /* periwinkle */
  --cool-soft: #86a7df;
  --cyan:      #7cf8f7;
  --selection: #1f253a;

  /* the accent: mint. Use for ONE thing per view (cursor, primary action, a single word) */
  --accent:     #82fb9c;
  --accent-hot: #50f872;
  --accent-ink: #04140a;

  /* type */
  --font: "FP Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --step-0:  clamp(0.95rem, 0.9rem + 0.25vw, 1.06rem);
  --step-1:  clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.2rem + 1.1vw, 2.1rem);
  --step-3:  clamp(1.9rem, 1.4rem + 2.2vw, 3.4rem);
  --step-4:  clamp(2.4rem, 1.5rem + 4vw, 5.6rem);
  --track-tight: -0.035em;
  --track-wide: 0.18em;

  /* space + shape */
  --gutter: clamp(16px, 4vw, 56px);
  --measure: 62ch;
  --radius: 14px;
  --radius-sm: 8px;

  /* motion: slow in, slower out, like a lens */
  --ease-lens: cubic-bezier(0.22, 0.61, 0.16, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 180ms;
  --t-med: 520ms;
  --t-film: 1100ms;

  /* depth */
  --glow-accent: 0 0 0.6em color-mix(in oklab, #82fb9c 45%, transparent);
  --glow-cool: 0 0 1.2em color-mix(in oklab, #7cf8f7 35%, transparent);
  --shadow-deep: 0 30px 80px -20px #000a, 0 10px 30px -10px #0008;
}

/* animatable custom props (Houdini) for the focus-pull transitions */
@property --blur { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --veil { syntax: "<number>"; inherits: false; initial-value: 0; }