/*
 * tokens.css
 * OWNS: every design token. Colors, type, spacing, radii, motion, z-index.
 *
 * Values are measured from resend.com's own stylesheet (dark theme), so the
 * site matches it rather than approximating it:
 *   - canvas #000, text in Resend's gray scale (gray-12 #f0f0f0 for emphasis,
 *     gray-11 #a1a4a5 for default text)
 *   - every border is Radix "slate" alpha (slate-6 for panels, cards, code)
 *   - headings carry a white -> 50% white gradient fill
 *   - buttons are frosted glass: 2px white/5 border, a faint diagonal sheen,
 *     backdrop blur, turning solid white with a soft glow on hover
 *   - radii: 16px controls, 24px panels and cards, full pills
 *
 * Font substitutes (Resend's display faces are licensed):
 *   Domaine Display -> Playfair Display  (hero, closing statement)
 *   aBC Favorit     -> Inter, tight tracking (section headings)
 *   Inter           -> Inter
 *   Commit Mono     -> Commit Mono (open source, self-hosted)
 */

:root {
  color-scheme: dark;

  /* ------------------------------------------------------- Resend grays */
  --gray-1: #141517;
  --gray-2: #191b1e;
  --gray-3: #212629;
  --gray-4: #293034;
  --gray-5: #333b3e;
  --gray-6: #3b4345;
  --gray-7: #434a4d;
  --gray-8: #52595b;
  --gray-9: #6e7679;
  --gray-10: #878d8f;
  --gray-11: #a1a4a5;
  --gray-12: #f0f0f0;

  /* Radix slate, dark, alpha: the border and wash scale */
  --slate-2: rgb(223 253 255 / 0.034);
  --slate-3: rgb(225 238 253 / 0.077);
  --slate-4: rgb(225 243 254 / 0.111);
  --slate-5: rgb(224 237 254 / 0.145);
  --slate-6: rgb(225 242 254 / 0.183);
  --slate-7: rgb(225 237 255 / 0.246);
  --slate-8: rgb(222 239 255 / 0.361);
  --slate-9: rgb(229 239 255 / 0.42);
  --slate-10: rgb(234 241 255 / 0.475);
  --slate-11: rgb(242 247 254 / 0.708);
  --slate-12: rgb(252 253 255 / 0.937);

  /* ------------------------------------------------------- semantic */
  --bg: #000000;
  --surface: #000000;
  --surface-pill: #0b0e14;
  --surface-hover: rgb(255 255 255 / 0.03);
  --surface-press: rgb(255 255 255 / 0.06);
  --scrim: rgb(0 0 0 / 0.6);

  --line: var(--slate-6);
  --line-soft: var(--slate-5);
  --line-strong: var(--slate-8);
  --line-hairline: var(--gray-3);
  --line-glass: rgb(255 255 255 / 0.05);
  --line-focus: rgb(255 255 255 / 0.3);

  --text-strong: #ffffff;
  --text-emphasis: var(--gray-12);
  --text: var(--gray-12);
  --text-muted: var(--gray-11);
  --text-link: var(--slate-11);
  --text-faint: var(--gray-9);
  --text-ghost: var(--gray-7);

  /* Brand violet: code identifiers and hashes only */
  --accent: #9281f7;
  --accent-soft: #baa7ff;

  /* Status: scan data only */
  --ok: #3ad389;
  --info: #70b8ff;
  --flag: #ff9592;
  --warn: #ffca16;
  --ok-wash: rgb(58 211 137 / 0.1);
  --flag-wash: rgb(255 149 146 / 0.08);

  /* ------------------------------------------------------- effects */
  --heading-gradient: linear-gradient(to bottom right, #ffffff 30%, rgb(255 255 255 / 0.5));
  --glass: linear-gradient(104deg, rgb(253 253 253 / 0.05) 5%, rgb(240 240 228 / 0.1) 100%);
  --glass-blur: 25px;
  --shadow-button: 0 0 4px rgb(255 255 255 / 0.06), 0 1px 14px rgb(255 255 255 / 0.12),
    0 3px 32px rgb(255 255 255 / 0.18);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --card-sheen: linear-gradient(rgb(80 80 80 / 0.15) 0%, rgb(0 0 0 / 0) 70%);
  --rainbow: #02fcef70 0%, #ffb52b70 50%, #a02bfe70 100%;
  /* Fine grain laid over glass surfaces, standing in for Resend's texture PNG */
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ------------------------------------------------------- type */
  --font-display: "Playfair Display", "Domaine Display", Georgia, "Times New Roman", serif;
  --font-head: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-text: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Commit Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 0.75rem;       /* 12 */
  --text-sm: 0.875rem;      /* 14 */
  --text-base: 1rem;        /* 16 */
  --text-lg: 1.125rem;      /* 18 */
  --text-xl: 1.25rem;       /* 20 */
  --text-2xl: 1.5rem;       /* 24 */
  --text-title: 1.75rem;    /* 28: auth and status titles */
  --text-heading: clamp(3rem, 2.6rem + 0.9vw, 3.5rem);     /* 48 -> 56 */
  --text-cta: clamp(3.25rem, 2.2rem + 3.6vw, 4.8rem);       /* -> 76.8 */
  --text-display: clamp(3.5rem, 2rem + 5.6vw, 6rem);         /* 64 -> 96 */

  --leading-heading: 1.2;
  --leading-body: 1.5;
  --leading-relaxed: 1.6;

  --tracking-display: -0.01em;
  --tracking-tighter: -0.05em;
  --tracking-title: -0.045rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* ------------------------------------------------------- space */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;
  --s-13: 144px;

  /* max-w-7xl (1280) including px-6 gutters */
  --page-max: 1232px;
  --gutter: 24px;
  --section-y: clamp(48px, 8vw, 96px);
  --card-pad: 32px;
  --gap: 16px;

  /* ------------------------------------------------------- shape */
  --r-xs: 6px;     /* footer links, tiny chips */
  --r-sm: 8px;     /* code tabs */
  --r-md: 12px;    /* small controls */
  --r-lg: 16px;    /* buttons, inputs, tiles, quote cards */
  --r-xl: 24px;    /* panels, cards, code windows */
  --r-pill: 9999px;
  --hairline: 1px;

  /* ------------------------------------------------------- chrome */
  --nav-h: 58px;
  --tap: 40px;
  --chrome-fill: rgb(0 0 0 / 0.6);
  --chrome-blur: 12px;
  --sheet-fill: rgb(0 0 0 / 0.94);

  /* ------------------------------------------------------- motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-press: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 420ms;
  --dur-press: 100ms;
  --press-scale: 0.98;

  /* Read by scroll.js */
  --dur-line: 620;
  --dur-rule: 550;
  --stagger: 0.05;
  --parallax: 0;

  /* ------------------------------------------------------- layers */
  --z-rail: 30;
  --z-nav: 40;
  --z-overlay: 100;
}

@media (max-width: 640px) {
  :root {
    --gutter: 16px;
    --card-pad: 24px;
  }
}