@layer tokens, base, layout, components, effects, editor;

@layer tokens {
  :root {
    --bg: #09090a;
    --bg-2: #09090a;
    --radius: 0px;
    --ink: #e9e6df;
    --accent: #ff4d2e;
    --accent-ink: #0b0b0c;

    --line-pct: 10%;
    --line-strong-pct: 20%;
    --surface-pct: 80%;
    --glow-pct: 24%;
    --light-pct: 8%;
    --card-blur: 10px;
    --chamfer: 14px;
    --grain: 0.06;

    --ink-2: color-mix(in srgb, var(--ink) 76%, transparent);
    --ink-3: color-mix(in srgb, var(--ink) 50%, transparent);
    --ink-4: color-mix(in srgb, var(--ink) 28%, transparent);
    --line: color-mix(in srgb, var(--ink) var(--line-pct), transparent);
    --line-strong: color-mix(in srgb, var(--ink) var(--line-strong-pct), transparent);
    --surface: color-mix(in srgb, var(--bg) var(--surface-pct), transparent);
    --surface-solid: color-mix(in srgb, var(--bg) 96%, var(--ink));
    --raised: color-mix(in srgb, var(--ink) 4%, transparent);
    --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
    --accent-faint: color-mix(in srgb, var(--accent) 7%, transparent);
    --accent-line: color-mix(in srgb, var(--accent) 45%, transparent);
    --accent-glow: color-mix(in srgb, var(--accent) var(--glow-pct), transparent);

    --state-online: #9bd35a;
    --state-idle: #e6b43c;
    --state-dnd: #ec4b3b;
    --state-offline: #77736b;

    --font-display: "Instrument Serif", "Times New Roman", serif;
    --display-style: italic;
    --display-weight: 400;
    --display-stretch: normal;
    --display-tracking: -0.01em;
    --display-scale: 1.12;
    --font-body: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    --font-mark: "Silkscreen", ui-monospace, monospace;

    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 24px;
    --s6: 28px;
    --s7: 40px;
    --s8: 64px;

    --t-micro: 10px;
    --t-small: 11.5px;
    --t-body: 13px;
    --t-lead: 14px;
    --t-name: 46px;
    --track-label: 0.16em;

    --gutter: var(--s6);
    --avatar: 88px;

    --ease: cubic-bezier(0.16, 0.84, 0.24, 1);
    --ease-mech: cubic-bezier(0.7, 0, 0.2, 1);
    --d1: 140ms;
    --d2: 220ms;
    --d3: 420ms;
    --d4: 720ms;
  }
}