/* aepkit.tbelt.online tokens. The only file with literal design values. */

@layer reset, tokens, base, layout, components, utilities;

@layer tokens {
  :root {
    color-scheme: dark;

    /* Primitives: used inside this file only */
    --gray-1000: oklch(14.6% 0.005 265);
    --gray-950: oklch(17.2% 0.006 265);
    --gray-900: oklch(19.8% 0.007 265);
    --gray-850: oklch(23% 0.008 265);
    --gray-800: oklch(27.5% 0.009 265);
    --gray-700: oklch(35% 0.01 265);
    --gray-500: oklch(62% 0.012 265);
    --gray-400: oklch(72% 0.01 265);
    --gray-200: oklch(86% 0.006 265);
    --gray-100: oklch(93.5% 0.004 265);
    --gray-50: oklch(98% 0.002 265);
    --green-300: oklch(84% 0.16 152);
    --green-400: oklch(78% 0.18 152);
    --green-500: oklch(72% 0.18 152);
    --green-950: oklch(22% 0.04 152);
    --red-300: oklch(76% 0.13 22);
    --red-950: oklch(22% 0.035 22);
    --black: oklch(10% 0.004 265);

    /* Semantic color */
    --color-ground: var(--gray-1000);
    --color-surface: var(--gray-950);
    --color-surface-raised: var(--gray-900);
    --color-surface-hover: var(--gray-850);
    --color-border: var(--gray-800);
    --color-border-strong: var(--gray-700);
    --color-fg: var(--gray-100);
    --color-fg-strong: var(--gray-50);
    --color-fg-muted: var(--gray-400);
    --color-fg-faint: var(--gray-500);
    --color-success: var(--green-400);
    --color-success-soft: var(--green-950);
    --color-failure: var(--red-300);
    --color-failure-soft: var(--red-950);
    --color-action: var(--green-500);
    --color-action-hover: var(--green-300);
    --color-on-action: var(--black);
    --color-focus: var(--green-400);
    --color-selection: color-mix(in oklch, var(--green-500) 32%, transparent);
    --color-scrollbar: var(--gray-700);

    /* Typography */
    --font-body: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "JetBrains Mono Variable", ui-monospace, "SF Mono", Menlo, monospace;
    --text-inline-code: 0.9em;
    --text-2xs: 0.75rem;
    --text-xs: 0.8125rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.0625rem;
    --text-lg: 1.1875rem;
    --text-xl: 1.375rem;
    --text-2xl: clamp(1.75rem, 1.35rem + 1.4vw, 2.375rem);
    --text-display: clamp(2.375rem, 1.5rem + 3vw, 3.75rem);
    --leading-display: 1.04;
    --leading-tight: 1.15;
    --leading-snug: 1.35;
    --leading-body: 1.6;
    --leading-code: 1.6;
    --tracking-display: -0.035em;
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-caps: 0.06em;
    --weight-regular: 400;
    --weight-medium: 510;
    --weight-semibold: 590;
    --weight-bold: 680;
    --measure: 66ch;
    --measure-narrow: 52ch;
    --measure-terminal: 80ch;

    /* Space: 4px scale */
    --space-0-5: 0.125rem;
    --space-1: 0.25rem;
    --space-1-5: 0.375rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;
    --space-bullet-offset: 0.8em;
    --space-section: clamp(var(--space-20), 11vw, var(--space-32));
    --space-gutter: clamp(var(--space-4), 4vw, var(--space-12));
    --container: 75rem;
    --header-height: 3.75rem;
    --capture-lines: 18;
    --pane-shot-width: 31rem;
    --wide-shot-min: 70rem;
    --index-width: 15rem;
    --hairline: 1px;
    --rule-active: 2px;

    /* Shape and depth */
    --radius-xs: 0.25rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-pill: 999px;
    --shadow-capture: 0 1px 0 oklch(100% 0 0 / 0.04) inset, 0 24px 48px -24px oklch(0% 0 0 / 0.7);
    --shadow-focus: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus);

    /* Layers */
    --z-base: 0;
    --z-raised: 1;
    --z-sticky: 20;

    /* Motion */
    --duration-fast: 140ms;
    --duration-base: 240ms;
    --duration-slow: 480ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --duration-fast: 0ms;
      --duration-base: 0ms;
      --duration-slow: 0ms;
    }
  }
}