/* Karos Unity design tokens.
   Sizes are fluid from 320 to 3840px wide, so components need no per-breakpoint font or spacing overrides. */

/* Colours that hover and state transitions animate. */
@property --face-c { syntax:'<color>'; inherits:true; initial-value:transparent; }
@property --edge-c { syntax:'<color>'; inherits:true; initial-value:transparent; }
@property --accent { syntax:'<color>'; inherits:true; initial-value:#ab85e0; }

:root {
  color-scheme:dark;

  /* Ink: surfaces from the deepest to the lightest */
  --ink-0:#08080d; --ink-1:#0d0e14; --ink-2:#12111a; --ink-3:#17151f; --ink-4:#1f1b29; --ink-5:#2a2436;
  --bg:var(--ink-1);

  /* Text */
  --text:#f1edf6; --text-soft:#d5cfde; --muted:#aaa2b8; --faint:#8a8298;

  /* Antique gold */
  --gold-1:#fff1d6; --gold-2:#ffe2ad; --gold-3:#f0cf94; --gold:#e2bb7b; --gold-5:#c99a56; --gold-6:#8f6a35;
  --gold-bright:var(--gold-2); --gold-ink:#291a10;

  /* Accent of the palette switch: see body[data-palette] below */
  --accent:#ab85e0; --accent-deep:#7856a3; --glow:rgba(127,83,189,.17);

  /* Hairlines */
  --line:rgba(207,190,228,.13); --line-strong:rgba(207,190,228,.26);
  --line-gold:rgba(226,187,123,.32); --line-gold-strong:rgba(226,187,123,.66);

  /* States */
  --ok:#79bea0; --danger:#f2a9ad;

  /* Type families */
  --serif:'Cormorant Garamond',Georgia,serif;
  --display:'Cormorant SC','Cormorant Garamond',Georgia,serif;
  --sans:Manrope,Arial,sans-serif;

  /* Type scale: value at 390 / 1440 / 2560px wide */
  --fs-hero:clamp(44px,min(16vw,3.6vw + 52px,11.5svh),156px); /* 62 / 104 / 144, also held by the viewport height */
  --fs-h2:clamp(34px,min(10.5vw,2.9vw + 29px),104px);    /* 40 / 71 / 103 */
  --fs-h3:clamp(26px,1.15vw + 17px,50px);                /* 26 / 34 / 46 */
  --fs-h4:clamp(21px,.7vw + 15px,34px);                  /* 21 / 25 / 33 */
  --fs-lead:clamp(17px,.5vw + 13.5px,26px);              /* 17 / 21 / 26 */
  --fs-body:clamp(15px,.22vw + 12.6px,19px);             /* 15 / 16 / 18 */
  --fs-small:clamp(13px,.16vw + 11.2px,16px);            /* 13 / 13.5 / 15 — notes and disclaimers */
  --fs-micro:clamp(11px,.12vw + 9.8px,14px);             /* 11 / 11.5 / 13 — tracked capitals only */
  --fs-control:clamp(17px,.42vw + 13px,27px);            /* 17 / 19 / 24 — Cormorant SC on controls */

  /* Space */
  --gutter:clamp(16px,4.2vw,48px);
  --shell:min(100% - 2 * var(--gutter),clamp(1280px,87.5vw,2880px));
  --section-y:clamp(72px,8.4vw,190px);
  --gap:clamp(16px,1.7vw,40px);
  --control-h:clamp(50px,1.1vw + 40px,72px);
  --header-h:clamp(68px,4.6vw + 22px,128px);

  /* Shape: the 45° cut shared by plaques, controls and the rune divider */
  --cut:clamp(10px,.8vw,18px);
  --cut-s:7px;

  /* Motion */
  --ease:cubic-bezier(.2,.75,.25,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.3,1.35,.5,1);
  --t-fast:.18s; --t-mid:.36s; --t-slow:.8s;

  /* Layers */
  --z-rail:15; --z-header:20; --z-toast:40;

  /* Ornaments as masks: paint with background-color. */
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 7.4 4.6 11.3 12 12-7.4.7-11.3 4.6-12 12-.7-7.4-4.6-11.3-12-12 7.4-.7 11.3-4.6 12-12Z'/%3E%3C/svg%3E");
  --corner-tl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath fill='none' stroke='%23000' d='M.5 28V7.5l7-7H28'/%3E%3Cpath d='m11 7.5 3.5 3.5-3.5 3.5L7.5 11z'/%3E%3C/svg%3E");
  --corner-tr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cg transform='matrix(-1 0 0 1 28 0)'%3E%3Cpath fill='none' stroke='%23000' d='M.5 28V7.5l7-7H28'/%3E%3Cpath d='m11 7.5 3.5 3.5-3.5 3.5L7.5 11z'/%3E%3C/g%3E%3C/svg%3E");
  --corner-br:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cg transform='rotate(180 14 14)'%3E%3Cpath fill='none' stroke='%23000' d='M.5 28V7.5l7-7H28'/%3E%3Cpath d='m11 7.5 3.5 3.5-3.5 3.5L7.5 11z'/%3E%3C/g%3E%3C/svg%3E");
  --corner-bl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cg transform='matrix(1 0 0 -1 0 28)'%3E%3Cpath fill='none' stroke='%23000' d='M.5 28V7.5l7-7H28'/%3E%3Cpath d='m11 7.5 3.5 3.5-3.5 3.5L7.5 11z'/%3E%3C/g%3E%3C/svg%3E");

  /* Fine film grain over flat ink (see body::after) */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body[data-palette="emerald"] { --accent:#7cc5ae; --accent-deep:#3c8f79; --glow:rgba(53,156,127,.2); }