/* Graydient Apps — generated from tokens.json */
@font-face { font-family: "Geist"; src: url("fonts/Geist-Latin-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root, [data-theme="dark"] {
  --bg: #09090b;
  --surface: #121215;
  --surface-raised: #1a1a1f;
  --surface-sunken: #050506;
  --surface-glass: #121215b8;
  --line: #24242a;
  --line-strong: #6e6e7a;
  --ink: #fafafa;
  --ink-muted: #a3a3ad;
  --ink-disabled: #4a4a52;
  --accent: #ff4d8d;
  --accent-2: #ff8a3d;
  --accent-hover: #ff6fa3;
  --on-accent: #0a0a0c;
  --accent-soft: #3a1426;
  --accent-ink: #ff85b0;
  --focus: #ff85b0;
  --job-portraits: #ff8a65;
  --job-edits: #5bc8f5;
  --job-products: #a8f05c;
  --job-fun: #ffd54a;
  --job-style: #a78bfa;
  --job-fashion: #f472d0;
  --danger: #ff6464;
  --danger-soft: #3b1414;
  --success: #3ddcc4;
  --success-soft: #0d2e2a;
  --warning: #ffd23f;
  --warning-soft: #332a0a;
  --scrim: #000000a8;
  --on-media: #ffffff;
  --media-ink: #0a0a0c;
  --media-bg: #000000;
  --skeleton: #1c1c22;
  --skeleton-sheen: #2a2a33;
  --shadow-1: 0 2px 8px #00000080;
  --shadow-2: 0 24px 60px -12px #000000cc, 0 0 0 1px #24242a;
  --glow-accent: 0 10px 40px -8px #ff4d8db3, 0 4px 20px -6px #ff8a3d99;
  --focus-ring: 0 0 0 2px #09090b, 0 0 0 4px #ff85b0;
}
[data-theme="light"] {
  --bg: #f3f3f5;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #eaeaee;
  --surface-glass: #ffffffc7;
  --line: #e2e2e8;
  --line-strong: #85858f;
  --ink: #0b0b0e;
  --ink-muted: #55555e;
  --ink-disabled: #a9a9b0;
  --accent: #ff3d7f;
  --accent-2: #ff7a2e;
  --accent-hover: #ff5a92;
  --on-accent: #0a0a0c;
  --accent-soft: #ffe3ee;
  --accent-ink: #c4134f;
  --focus: #c4134f;
  --job-portraits: #e0552b;
  --job-edits: #0a86bd;
  --job-products: #3f8f0e;
  --job-fun: #a87a00;
  --job-style: #7457e0;
  --job-fashion: #c22f98;
  --danger: #c8221f;
  --danger-soft: #fde8e7;
  --success: #0a7468;
  --success-soft: #dff5f1;
  --warning: #8a5d00;
  --warning-soft: #fbf0d3;
  --scrim: #000000a8;
  --on-media: #ffffff;
  --media-ink: #0a0a0c;
  --media-bg: #000000;
  --skeleton: #e4e4ea;
  --skeleton-sheen: #f2f2f6;
  --shadow-1: 0 1px 2px #0b0b0e0d, 0 2px 8px #0b0b0e14;
  --shadow-2: 0 8px 20px #0b0b0e14, 0 24px 56px -12px #0b0b0e33, 0 0 0 1px #e2e2e8;
  --glow-accent: 0 10px 30px -10px #ff3d7fa6, 0 4px 16px -6px #ff7a2e80;
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #c4134f;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;
  --control-sm: 32px;
  --control-md: 44px;
  --control-lg: 60px;
  --rail-width: 420px;
  --content-max: 1400px;
  --tile-min: 104px;
  --card-min: 230px;
  --duration-instant: 90ms;
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;
  --duration-shimmer: 1600ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --z-header: 20;
  --z-rail-footer: 25;
  --z-sheet: 40;
  --z-toast: 50;
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.display { font-family: var(--font-sans); font-size: 72px; line-height: 68px; font-weight: 800; letter-spacing: -0.045em; }
.title-1 { font-family: var(--font-sans); font-size: 40px; line-height: 42px; font-weight: 800; letter-spacing: -0.035em; }
.title-2 { font-family: var(--font-sans); font-size: 26px; line-height: 30px; font-weight: 750; letter-spacing: -0.025em; }
.title-3 { font-family: var(--font-sans); font-size: 17px; line-height: 22px; font-weight: 700; letter-spacing: -0.01em; }
.body { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 400; }
.body-strong { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 600; }
.button { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 700; }
.label { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 600; }
.eyebrow { font-family: var(--font-sans); font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.12em; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: 0.005em; }