/* tokens.css — FantasyCabin "Living Memory" design tokens. Every screen and component reads these. */
:root {
  /* colour */
  --sv-bg: #07020f;                 /* page ground */
  --sv-violet-ground: #2a0a5e;      /* top radial glow */
  --sv-panel: rgba(30,8,66,.6);     /* card fill */
  --sv-panel-strong: rgba(30,8,66,.78);
  --sv-panel-soft: rgba(30,8,66,.5);
  --sv-line: rgba(162,77,255,.28);  /* default hairline */
  --sv-line-soft: rgba(162,77,255,.18);
  --sv-line-2: rgba(162,77,255,.3);
  --sv-line-strong: rgba(162,77,255,.45);
  --sv-line-hover: rgba(201,139,255,.9);
  --sv-fill-hover: rgba(162,77,255,.12);
  --sv-violet: #a24dff;             /* accent */
  --sv-violet-bright: #c98bff;      /* highlight / active */
  --sv-violet-deep: #6a1fe0;        /* primary button bottom */
  --sv-text: #f3ecff;
  --sv-text-soft: #e0d0fb;
  --sv-text-muted: #c0acef;
  --sv-text-dim: #8d74b8;
  --sv-placeholder: #6a5a8e;
  --sv-plum-solid: #1e0842;
  /* rgb triplets for rgba(var(--…-rgb), alpha): the palette's translucent layers.
     Themes (deep-ink.css) swap these, so one alpha list serves every theme. */
  --sv-accent-rgb: 162,77,255;   /* hairlines, fills, soft glows */
  --sv-glow-rgb: 201,139,255;    /* highlights, selected edges, focus */
  --sv-deep-rgb: 106,31,224;     /* deep radial glows, gradient ends */
  --sv-plum-rgb: 30,8,66;        /* panel and card fills */
  --sv-ground-rgb: 7,2,15;       /* scrims and near-ground overlays */
  --sv-night-rgb: 14,4,32;       /* popover/drawer fills */
  --sv-night2-rgb: 10,3,24;
  --sv-on-primary: #07020f;      /* text on the primary button */
  /* one-off violet tints from the delivered screens; themes remap them */
  --sv-tint-lav: #a18abc;
  --sv-tint-lav2: #b6a0d2;
  --sv-tint-lav3: #b89adf;
  --sv-tint-lav4: #d9c6f3;
  --sv-tint-lav5: #d8c2ff;
  --sv-tint-lav6: #e0c9ff;
  --sv-tint-violet: #b276eb;
  --sv-tint-slate: #4a3a6a;
  --sv-tint-night: #0e0420;
  --sv-tint-night2: #0b0318;
  --sv-tint-plum: #17092c;
  --sv-tint-plum2: #150a2e;
  --sv-tint-plum3: #120725;
  --sv-tint-plum4: #100624;
  --sv-tint-royal-rgb: 71,20,127;
  --sv-tint-abyss-rgb: 5,2,12;
  --sv-tint-indigo-rgb: 42,10,94;
  --sv-tint-abyss2-rgb: 4,1,10;
  --sv-tint-dusk-rgb: 16,5,35;
  --sv-danger: #dc5a4e;
  --sv-success: #93b56f;
  --sv-warning: #e0b34e;
  /* memory-graph node types (also used for presence dots and hero marks) */
  --sv-node-player: #e8c84e; --sv-node-person: #5aa6e0; --sv-node-place: #6cbf6a; --sv-node-faction: #dc5a4e; --sv-node-item: #e0913f; --sv-node-lore: #9aa0a8; --sv-node-other: #b18cd0;
  /* gradients */
  --sv-grad-primary: linear-gradient(180deg, #c98bff, #6a1fe0);
  --sv-grad-badge: linear-gradient(180deg, #c98bff, #a24dff);
  --sv-grad-sheen: linear-gradient(110deg, #a24dff 20%, #ffffff 45%, #c98bff 55%, #6a1fe0 80%);
  /* typography — Cinzel 600/700 display · Cormorant Garamond 400/500/600 (+italic) body · JetBrains Mono 400/500 labels */
  --sv-font-display: 'Cinzel', Georgia, serif;
  --sv-font-body: 'Cormorant Garamond', Georgia, serif;
  --sv-font-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* The READING face, for anything the player reads in quantity or types into:
     narration, the composer, the creation questions. Cormorant is a display
     Garamond — beautiful in a title, hard work in a paragraph — so it keeps the
     chrome and Literata takes the prose. `--read-font` is the player's own
     choice from Settings and wins wherever the story text is concerned. */
  --sv-font-read: 'Literata', Georgia, serif;
  --sv-read-weight: 430;   /* screen serifs need a touch over 400 on a dark ground */
  --sv-label-size: 10.5px; --sv-label-tracking: .2em;   /* uppercase mono labels */
  --sv-body-size: 17px;   --sv-body-lh: 1.55;
  /* spacing (4px base) */
  --sv-s1: 4px; --sv-s2: 8px; --sv-s3: 12px; --sv-s4: 16px; --sv-s5: 20px; --sv-s6: 24px; --sv-s8: 32px; --sv-s10: 40px;
  /* radii */
  --sv-r-sm: 8px; --sv-r-md: 10px; --sv-r-pill: 999px; --sv-r-card: 0;   /* cards are square with a gem-inset border */
  /* borders + shadows */
  --sv-card-inset: inset 0 0 0 4px var(--sv-bg), inset 0 0 0 5px rgba(162,77,255,.1);   /* the double "codex" frame */
  --sv-glow-primary: 0 10px 32px -10px rgba(162,77,255,.6);
  --sv-glow-focus: 0 0 0 3px rgba(201,139,255,.35);
  --sv-shadow-pop: 0 30px 70px -30px rgba(0,0,0,.9);
  /* motion */
  --sv-ease-spring: cubic-bezier(.34,1.56,.64,1);
  --sv-ease-out: cubic-bezier(.22,1,.36,1);
  --sv-t-fast: .15s; --sv-t-med: .3s; --sv-t-slow: .6s;
  /* layout */
  --sv-topbar-h: 64px; --sv-bottombar-h: 64px; --sv-drawer-w: 330px; --sv-side-w: 340px; --sv-phone: 720px;
}
@media (prefers-reduced-motion: reduce) { :root { --sv-t-fast: 0s; --sv-t-med: 0s; --sv-t-slow: 0s; } }

/* SVG presentation attributes cannot take var(); map the palette literals here. */
[stroke="#c98bff"] { stroke: var(--sv-violet-bright); }
[fill="#c98bff"] { fill: var(--sv-violet-bright); }
[stroke="rgba(201,139,255,.45)"] { stroke: rgba(var(--sv-glow-rgb),.45); }
[stroke="rgba(201,139,255,.4)"] { stroke: rgba(var(--sv-glow-rgb),.4); }
[fill="rgba(30,8,66,.85)"] { fill: rgba(var(--sv-plum-rgb),.85); }