/* kasse/tokens.css
 *
 * Fused design tokens for Kasse.
 * Base schema: design-systems/trading-terminal/tokens.css (open-design library)
 * Values: extracted from apps/websites/www.paulkalkbrenner.net/
 *   (paul-kalkbrenner-staging.shared.24131cd38.css :root + rules, cdn.odyn.dev/p/j52r/bundle.css)
 * Override notes inline. Paste into the app's global stylesheet first.
 */

/* Font — the quarry's variable grotesk. File ships in the quarry mirror:
 * apps/websites/cdn.prod.website-files.com/69bbf53ccfefd61290c68689/69c544aa9f0eeb44e81eb6e0_ABCDiatypePlusVariable.ttf
 * Copy it to ./fonts/ABCDiatypePlusVariable.ttf (verify license for production). */
@font-face {
  font-family: "ABC Diatype Plus Variable";
  src: url("./fonts/ABCDiatypePlusVariable.ttf") format("truetype");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap; /* quarry: font-display swap */
}

:root {
  /* ---- Surfaces / ink (quarry :root) ---- */
  --bg: #ffffff;               /* quarry --color--light, .main background */
  --surface: #ffffff;          /* panels share the canvas — separation by hairlines, not fills */
  --surface-2: color-mix(in srgb, var(--fg), transparent 96%); /* row hover / subtle fill — quarry color-mix technique */
  --fg: #000000;               /* quarry --color--dark, body text */
  --fg-2: color-mix(in srgb, var(--fg), transparent 40%); /* quarry --color--dark-40 — secondary text */
  --muted: #c5c5c5;            /* quarry --color--gray (data-theme=gray) — metadata, disabled */
  --ink-20: color-mix(in srgb, var(--fg), transparent 80%); /* quarry --color--dark-20 — faint rules */
  --invert-bg: #000000;        /* quarry body/.nav-list__bg/.footer-overlay — black pockets */
  --invert-fg: #ffffff;

  /* ---- Signal accent + data-state fills (quarry :root) ----
   * ONE accent does all signal work on white; green/yellow appear only as
   * FILLS behind ink (chips/dots), never as text or decoration. */
  --accent: #ff6831;           /* quarry --color--orange — THE accent for fills/graphics/rules */
  --accent-on: #ffffff;
  --accent-ink: #d2440f;       /* text-safe shade of the orange — 4.6:1 on white (AA) */
  --accent-hover: color-mix(in srgb, var(--accent), black 12%);
  --accent-active: color-mix(in srgb, var(--accent), black 20%);
  --accent-rust: #c96d4d;      /* quarry .direcitonal-list__eyebrow — muted label accent */
  --good-bg: #a7ff9c;          /* quarry --color--green — healthy/positive chip fill + ink text */
  --warn-bg: #ffcc00;          /* quarry --color--yellow (#fc0) — pending/warning chip fill + ink text */
  --success: var(--good-bg);   /* use as fill only */
  --warn: var(--warn-bg);
  --danger: var(--accent);     /* errors, needs_reauth, negative deltas — the one signal */

  /* ---- Type (quarry computed: body = ABC Diatype Variable, wght 700, em sizes @16px root) ---- */
  --font-display: "ABC Diatype Plus Variable", Arial, Helvetica, sans-serif;
  --font-body: "ABC Diatype Plus Variable", Arial, Helvetica, sans-serif;
  --font-mono: "ABC Diatype Plus Variable", Arial, sans-serif; /* quarry has no mono; money = tabular figures of the grotesk */
  --text-xs: 11px;             /* base (trading-terminal) — micro labels, pending flags; quarry floor is 12px (fill) */
  --text-sm: 14px;             /* quarry .p-s / tour-table cells (.875em) */
  --text-base: 16px;           /* quarry .p-r (1em) */
  --text-lg: 18px;             /* quarry .p-l (1.125em) */
  --text-xl: 24px;             /* quarry .h-m / h3 (1.5em) lh .9 ls -.02em */
  --text-2xl: 48px;            /* quarry .h-l / h2 (3em) lh .9 ls -.02em */
  --text-3xl: 128px;           /* quarry .h-xl (8em) lh .8 ls -.05em */
  --text-4xl: 200px;           /* quarry .h-d / h1 (12.5em) lh .8 ls -.05em — clamp in use */
  --leading-body: 1.5;         /* quarry .p-r */
  --leading-tight: 0.9;        /* quarry headings */
  --leading-display: 0.8;      /* quarry h-d / h-xl */
  --tracking-display: -0.05em; /* quarry display */
  --tracking-head: -0.02em;    /* quarry h-l/h-m */
  --tracking-eyebrow: 0.1em;   /* quarry .direcitonal-list__eyebrow */
  --weight-ui: 700;            /* quarry body font-weight — everything bold */
  --weight-body: 500;          /* long-form only (legal) — variable axis (fill) */

  /* ---- Spacing (quarry em gaps → px @16px) ---- */
  --space-1: 4px;   /* quarry --gap-xxs .25em */
  --space-2: 8px;   /* quarry --gap-xs .5em */
  --space-3: 12px;  /* quarry --gap-s .75em */
  --space-4: 16px;  /* quarry --gap-m 1em */
  --space-5: 20px;  /* quarry --gap-ml 1.25em = --col-pad */
  --space-6: 24px;  /* quarry --gap-l 1.5em */
  --space-8: 32px;  /* quarry --gap-xl 2em */
  --space-12: 48px;
  --page-pad: 10px;            /* quarry --page-pad .625em — edge-to-edge poster gutter */
  --section-y-desktop: clamp(64px, 10vw, 120px); /* quarry --space-m 7.5em landing rhythm */
  --section-y-tablet: 60px;
  --section-y-phone: 42px;
  --section-y-app: 32px;       /* quarry --space-sm 2em — dashboard density */

  /* ---- Shape (quarry: sharp + pills; base schema radii) ---- */
  --radius-sm: 4px;            /* quarry .25em corners on fields/cards */
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 2.5em;        /* quarry --button-border-radius: 2.5em (≈40px) — buttons, chips, dots */

  /* ---- Elevation (both systems flat — none) ---- */
  --elev-flat: none;
  --elev-ring: 0 0 0 1px var(--fg);          /* hairline ring */
  --elev-raised: 0 24px 80px rgba(0, 0, 0, 0.14); /* menus/popovers only — quarry has no card shadows (fill) */
  --focus-ring: 0 0 0 2px var(--fg);         /* quarry button focus: .125em box-shadow */

  /* ---- Motion (quarry bundle.css :root + GSAP "osmo") ---- */
  --ease-standard: cubic-bezier(0.625, 0.05, 0, 1); /* quarry --cubic-default / CustomEase "osmo" */
  --ease-hover-tile: cubic-bezier(0.16, 1, 0.3, 1); /* quarry data-directional-hover-tile */
  --ease-click: cubic-bezier(0.4, 0, 0.2, 1);       /* quarry --button-ease-click */
  --motion-fast: 90ms;         /* base — hover/active micro-states */
  --motion-base: 160ms;        /* base — state changes */
  --motion-quarry: 0.7s;       /* quarry --animation-default */
  --motion-quarry-half: 0.35s; /* quarry --animation-default-half (nav hide, fades) */
  --motion-underline: 0.735s;  /* quarry data-underline-link scaleX */
  --motion-odometer: 2s;       /* quarry odometer duration */
  --odometer-digit-stagger: 0.04s;
  --odometer-element-stagger: 0.1s;
  --odometer-digit-cycles: 2;
  --reveal-stagger: 35ms;      /* quarry tour-dates data-stagger="35" */
  --reveal-duration: 0.8s;     /* quarry reveal-group */
  --reveal-distance: 150%;     /* quarry tour-dates data-distance */

  /* ---- Frame ---- */
  --container-max: 1320px;     /* base — app pages; marketing runs edge-to-edge under --page-pad */
  --container-gutter-desktop: 20px; /* quarry --col-pad 1.25em */
  --container-gutter-tablet: 16px;
  --container-gutter-phone: 10px;   /* quarry --page-pad */
}

/* Money figures — the quarry's tabular-nums rule from [data-odometer-element] */
.num, .amount, [data-odometer-element] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}