/*
  Fxxk.ai public UI/UX design layer.
  This file is intentionally design-only: colors, type, radius, shadow,
  motion, and high-level surface tokens. It must not define routes, auth,
  pricing, payment, chat, SKU, Supabase, Cloudflare, or customer state logic.
*/

:root {
  --fx-design-contract-version: "2026-06-19-public-ui-ux-separation-v1";

  --fx-color-page-bg: #f7f8fb;
  --fx-color-surface: #ffffff;
  --fx-color-surface-glow: #fbfcff;
  --fx-color-surface-2: #f1f4f9;
  --fx-color-text: #14161a;
  --fx-color-text-soft: #30343b;
  --fx-color-muted: #6b7280;
  --fx-color-meta: #8b93a1;
  --fx-color-border: #e5e9f0;
  --fx-color-border-strong: #d7dde7;
  --fx-color-accent: #f2c230;
  --fx-color-accent-on: #16181c;
  --fx-color-accent-hover: #e5b82b;
  --fx-color-blue: #4285f4;
  --fx-color-violet: #9b5cff;
  --fx-color-rose: #ff6d7a;
  --fx-color-green: #34a853;
  --fx-color-danger: #dc2626;
  --fx-color-warn: #eab308;
  --fx-color-success: #17a34a;
  --fx-color-deep: #111317;
  --fx-color-deep-2: #1b1f27;
  --fx-color-deep-3: #171a21;
  --fx-color-hero-gold-button-fg: #294a78;

  --fx-font-display: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans CJK JP", "Meiryo", "Yu Gothic UI", system-ui, sans-serif;
  --fx-font-body: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans CJK JP", "Meiryo", "Yu Gothic UI", system-ui, sans-serif;
  --fx-font-mono: ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Mono", "Cascadia Code", Consolas, "Microsoft YaHei UI", "Meiryo", monospace;
  --fx-font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", emoji;

  --fx-radius-sm: 10px;
  --fx-radius-md: 16px;
  --fx-radius-lg: 24px;
  --fx-radius-pill: 999px;
  --fx-shadow-soft: 0 22px 70px color-mix(in oklab, var(--fx-color-deep), transparent 84%);
  --fx-shadow-float: 0 14px 42px color-mix(in oklab, var(--fx-color-deep), transparent 88%);
  --fx-focus-ring: 0 0 0 3px color-mix(in oklab, var(--fx-color-blue), transparent 72%);
  --fx-ease-standard: cubic-bezier(0.2, 0, 0, 1);

  --bg: var(--fx-color-page-bg);
  --surface: var(--fx-color-surface);
  --surface-glow: var(--fx-color-surface-glow);
  --surface-2: var(--fx-color-surface-2);
  --fg: var(--fx-color-text);
  --fg-2: var(--fx-color-text-soft);
  --muted: var(--fx-color-muted);
  --meta: var(--fx-color-meta);
  --border: var(--fx-color-border);
  --border-2: var(--fx-color-border-strong);
  --accent: var(--fx-color-accent);
  --accent-on: var(--fx-color-accent-on);
  --accent-hover: var(--fx-color-accent-hover);
  --blue: var(--fx-color-blue);
  --violet: var(--fx-color-violet);
  --rose: var(--fx-color-rose);
  --green: var(--fx-color-green);
  --danger: var(--fx-color-danger);
  --warn: var(--fx-color-warn);
  --success: var(--fx-color-success);
  --deep: var(--fx-color-deep);
  --deep-2: var(--fx-color-deep-2);
  --deep-3: var(--fx-color-deep-3);
  --hero-gold-button-fg: var(--fx-color-hero-gold-button-fg);
  --font-display: var(--fx-font-display);
  --font-body: var(--fx-font-body);
  --font-mono: var(--fx-font-mono);
  --font-emoji: var(--fx-font-emoji);
  --radius-sm: var(--fx-radius-sm);
  --radius-md: var(--fx-radius-md);
  --radius-lg: var(--fx-radius-lg);
  --radius-pill: var(--fx-radius-pill);
  --shadow-soft: var(--fx-shadow-soft);
  --shadow-float: var(--fx-shadow-float);
  --focus-ring: var(--fx-focus-ring);
  --ease-standard: var(--fx-ease-standard);
}

:root[data-theme="dark"],
body[data-screen="desktop-sku"] {
  --fx-color-page-bg: #070910;
  --fx-color-surface: #0d111a;
  --fx-color-surface-glow: #141b28;
  --fx-color-surface-2: #161d29;
  --fx-color-text: #f4f6fb;
  --fx-color-text-soft: #d9deea;
  --fx-color-muted: #a5adbb;
  --fx-color-meta: #7f8999;
  --fx-color-border: #293241;
  --fx-color-border-strong: #3a4658;
  --fx-color-accent: #f5c84b;
  --fx-color-accent-on: #14110a;
  --fx-color-accent-hover: #ffd966;
  --fx-color-blue: #86a8ff;
  --fx-color-violet: #c19aff;
  --fx-color-rose: #ff8ca0;
  --fx-color-green: #4bd37b;
  --fx-color-danger: #ff6d6d;
  --fx-color-warn: #f5c84b;
  --fx-color-success: #4bd37b;
  --fx-color-deep: #03050a;
  --fx-color-deep-2: #080b12;
  --fx-color-deep-3: #0c111b;
  --fx-shadow-soft: 0 24px 80px color-mix(in oklab, black, transparent 40%);
  --fx-shadow-float: 0 18px 54px color-mix(in oklab, black, transparent 48%);
  --fx-focus-ring: 0 0 0 3px color-mix(in oklab, var(--fx-color-accent), transparent 66%);
}