/*
 * Talegates design tokens: the single place colour, type, space, shape, depth and motion are decided.
 *
 * Direction: premium developer tools. Near-black with a faint violet cast, one purple accent (the Bloxma plugin's own accent),
 * hairline borders, soft tinted light instead of shadows, quiet motion. The page is dark everywhere (one theme per page).
 *
 * CONTRACT with the Talegates Core plugin: its own stylesheet reads exactly these names, so its pages restyle from here:
 *   --tg-ink --tg-text --tg-text-muted --tg-surface --tg-surface-2 --tg-line --tg-accent --tg-accent-ink --tg-accent-text
 *   --tg-focus --tg-ok --tg-warn --tg-danger --tg-radius --tg-font-body --tg-font-display --tg-font-mono
 * Keep them defined. Everything else below is free to change.
 *
 * Fonts are self-hosted (assets/fonts): no third-party font requests.
 */

@font-face { font-family: "Geist"; src: url("../fonts/geist-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;

  /* ---- surfaces (one neutral family, tinted toward the accent hue) ---- */
  --tg-bg: #07070b;            /* page */
  --tg-bg-raised: #0c0c12;     /* bands, inset wells, inputs */
  --tg-surface: #11111a;       /* cards */
  --tg-surface-2: #181823;     /* hover / elevated */
  --tg-surface-3: #20202d;     /* pressed / selected */
  --tg-line: rgba(255, 255, 255, .09);        /* hairlines */
  --tg-line-strong: rgba(255, 255, 255, .17); /* hover borders, frames */

  /* ---- text ---- */
  --tg-text: #f4f3f9;
  --tg-text-muted: #a8a7ba;    /* 8.5:1 on --tg-bg, 8.0:1 on --tg-surface */
  --tg-text-dim: #8c8ba1;      /* secondary labels only: 6.1:1 on --tg-bg, 5.7:1 on --tg-surface */

  /* ---- the one accent: Bloxma purple ---- */
  --tg-purple: #7254fa;        /* fills: white text on it is 4.8:1 */
  --tg-purple-hover: #7658fb;  /* hover fill: white text 4.6:1 (a brighter fill would drop below AA, so hover adds light, not lightness) */
  --tg-purple-bright: #947aff; /* borders, rings, glow, text-on-dark: NEVER a fill under white text (3.2:1) */
  --tg-purple-deep: #5c40d6;   /* pressed: white text 6.7:1 */
  --tg-purple-soft: rgba(114, 84, 250, .14);
  --tg-purple-glow: rgba(114, 84, 250, .38);
  --tg-accent: var(--tg-purple);
  --tg-accent-hover: var(--tg-purple-hover);
  --tg-accent-active: var(--tg-purple-deep);
  --tg-accent-ink: #ffffff;
  --tg-accent-text: #ac98ff;   /* purple used AS TEXT on dark: 8.3:1 on --tg-bg, 7.3:1 on --tg-surface-2 */
  --tg-focus: #c4b6ff;         /* focus ring: 11:1 on --tg-bg */

  /* ---- plugin contract: deep violet used for "Lifetime" cards / pills (white text on it) ---- */
  --tg-ink: #17123a;

  /* ---- status (text-safe on dark; danger is also a fill with white text) ---- */
  --tg-ok: #4fd8a6;
  --tg-warn: #f2b84b;
  --tg-danger: #d63a40;        /* fill, white text 4.6:1 */
  --tg-danger-text: #ff8d95;   /* as text on dark 8.5:1 */

  /* ---- logo: the gate's fill follows the accent. One token to revert: #ff5b2e is the previous brand orange ---- */
  --tg-logo-gate: var(--tg-purple);

  /* ---- type ---- */
  --tg-font-display: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tg-font-body: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tg-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tg-fs-body: 1.0625rem;
  --tg-fs-small: .9375rem;
  --tg-fs-label: .8125rem;
  --tg-fs-lede: clamp(1.0625rem, .98rem + .4vw, 1.25rem);
  --tg-fs-h3: clamp(1.15rem, 1.05rem + .45vw, 1.4rem);
  --tg-fs-h2: clamp(1.85rem, 1.2rem + 2.2vw, 3.05rem);
  --tg-fs-h1: clamp(2.5rem, 1.35rem + 4.6vw, 4.85rem);
  --tg-lh-body: 1.65;
  --tg-track-h1: -.045em;
  --tg-track-h2: -.035em;
  --tg-track-h3: -.02em;
  --tg-measure: 38rem;         /* comfortable paragraph width */

  /* ---- space (4px base) ---- */
  --tg-s-1: .25rem;  --tg-s-2: .5rem;  --tg-s-3: .75rem; --tg-s-4: 1rem;  --tg-s-5: 1.5rem;
  --tg-s-6: 2rem;    --tg-s-7: 3rem;   --tg-s-8: 4rem;   --tg-s-9: 6rem;
  --tg-section: clamp(3.5rem, 2.2rem + 5.2vw, 6.75rem);  /* vertical rhythm between sections */
  --tg-gutter: clamp(1.25rem, 4.5vw, 3rem);
  --tg-wrap: 74rem;                                      /* 1184px content */
  --tg-wrap-narrow: 46rem;
  --tg-header-h: 4rem;
  --tg-header-offset: 5rem;                              /* header bar + its padding: what the hero tucks under */

  /* ---- shape: ONE scale. Buttons and nav are pills, cards 20, big frames 28 (inner = outer - 6), inputs 12, tags 8 ---- */
  --tg-radius-xs: 6px;
  --tg-radius-sm: 8px;
  --tg-radius: 12px;           /* plugin contract (inputs, plugin controls) */
  --tg-radius-lg: 20px;
  --tg-radius-xl: 28px;
  --tg-radius-pill: 999px;

  /* ---- depth: tinted, sparing ---- */
  --tg-shadow-card: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 24px 48px -28px rgba(2, 0, 24, .9);
  --tg-shadow-frame: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 40px 80px -40px rgba(60, 30, 200, .55);
  --tg-shadow-button: 0 1px 0 rgba(255, 255, 255, .24) inset, 0 8px 24px -10px var(--tg-purple-glow);

  /* ---- motion (Emil Kowalski): strong custom ease-out, never ease-in; UI under 300ms; reveals are slower ---- */
  --tg-ease-out: cubic-bezier(.23, 1, .32, 1);
  --tg-ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --tg-ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --tg-dur-press: 140ms;       /* :active feedback */
  --tg-dur-hover: 180ms;       /* hover, colour */
  --tg-dur-ui: 240ms;          /* menus, popovers, focus */
  --tg-dur-sheet: 360ms;       /* mobile menu */
  --tg-dur-reveal: 640ms;      /* section entrances (seen once) */
  --tg-stagger: 60ms;

  /* ---- layers (documented, never ad hoc) ---- */
  --tg-z-header: 50;
  --tg-z-sheet: 60;
  --tg-z-skip: 100;
}

/*
 * COMPATIBILITY: Elementor pages built from the previous design carry these classes. They keep working and now map to the
 * new look, so replacing only the theme (before re-importing the new page templates) never produces a broken page.
 * Do not use them in new work.
 */
.tg-dark, .tg-section--paper-2, .tg-section--white, .tg-section--dark { --tg-surface: #11111a; }