/* =========================================================================
   EWA Design Tokens — Vercel-inspired AI Native Engineering
   纯白底 · 近黑字 · 影子即边框 · 极致负字距 · 工作流色功能化
   Reference: 02-website/design/DESIGN.md
   ========================================================================= */

:root {
  /* ---- Surfaces (white scale) ---- */
  --bg-page: #ffffff;
  --bg-tint: #fafafa;
  --bg-card: #ffffff;
  --bg-elevated: #ffffff;
  --bg-overlay: hsla(0, 0%, 98%, 1);
  --bg-inverse: #171717;

  /* legacy alias for pages that still use --bg-0/1/2/3 */
  --bg-0: var(--bg-page);
  --bg-1: var(--bg-tint);
  --bg-2: var(--bg-card);
  --bg-3: var(--bg-elevated);

  /* ---- Text (warm-neutral black scale) ---- */
  --text-1: #171717;        /* primary — Vercel black, slight warmth */
  --text-2: #4d4d4d;        /* body, descriptions */
  --text-3: #666666;        /* muted, metadata */
  --text-4: #808080;        /* placeholder, disabled */
  --text-inverse: #ffffff;
  --text-selection: hsla(0, 0%, 95%, 1);

  /* ---- Borders as shadow (Vercel signature) ---- */
  --border-shadow: rgba(0, 0, 0, 0.08);
  --border-shadow-strong: rgba(0, 0, 0, 0.16);
  --border-shadow-light: rgba(0, 0, 0, 0.04);
  --ring-light: rgb(235, 235, 235);

  /* legacy alias for pages still using --border-1/2/3 (no-op color, prefer shadows) */
  --border-1: var(--ring-light);
  --border-2: var(--border-shadow);
  --border-3: var(--border-shadow-strong);

  /* ---- Functional accent colors (workflow only, never decorative) ---- */
  --accent: #171717;                  /* primary CTA bg = Vercel black */
  --accent-hover: #000000;
  --accent-foreground: #ffffff;
  --accent-link: #0072f5;             /* inline link blue */
  --accent-focus: hsla(212, 100%, 48%, 1);

  /* Workflow colors — only used in pipeline / status contexts */
  --accent-ship: #ff5b4f;             /* ship-red */
  --accent-preview: #de1d8d;          /* preview-pink */
  --accent-develop: #0a72ef;          /* develop-blue */

  /* Badges */
  --badge-bg: #ebf5ff;
  --badge-text: #0068d6;
  --badge-success-bg: #ecfdf5;
  --badge-success-text: #047857;

  /* legacy aliases for any page using --accent-soft etc — map to white-ish surfaces */
  --accent-soft: var(--bg-tint);
  --accent-soft-strong: var(--bg-tint);
  --accent-border: var(--border-shadow);
  --accent-glow: transparent;

  /* ---- Status ---- */
  --warn: #b45309;
  --danger: #b91c1c;
  --success: #047857;

  /* ---- Typography ---- */
  --font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC',
               'Microsoft YaHei', 'Helvetica Neue', sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, 'SF Mono',
               'Cascadia Mono', Menlo, Consolas, monospace;
  --font-display: var(--font-sans);

  /* OpenType — ligatures + alt 'a' (cv01) + tabular numerals */
  --font-features: 'liga' 1, 'cv01' 1, 'ss03' 1, 'tnum' 1;

  /* ---- Type scale (Vercel hierarchy, fluid for marketing hero) ---- */
  --text-mega:    clamp(3.0rem, 1rem + 6vw, 6.0rem);   /* 48-96 hero */
  --text-display: clamp(2.5rem, 1rem + 3vw, 3.0rem);  /* 40-48 section title */
  --text-h1:      clamp(2.0rem, 1rem + 1.5vw, 2.0rem); /* 32 */
  --text-h2:      1.5rem;    /* 24 */
  --text-h3:      1.25rem;   /* 20 */
  --text-h4:      1.125rem;  /* 18 */
  --text-body:    1.0625rem; /* 17 */
  --text-small:   0.9375rem; /* 15 */
  --text-micro:   0.8125rem; /* 13 */
  --text-label:   0.75rem;   /* 12 — buttons, captions, mono labels */
  --text-tiny:    0.6875rem; /* 11 — micro badges */

  /* Letter-spacing scale — gets tighter as text gets bigger (Vercel signature) */
  --tracking-mega:    -0.06em;   /* ~ -2.88px @ 48 */
  --tracking-display: -0.05em;
  --tracking-h1:      -0.04em;
  --tracking-h2:      -0.04em;   /* ~ -0.96px @ 24 */
  --tracking-body:    0;
  --tracking-label:   0;         /* don't widen unless mono uppercase */
  --tracking-mono:    0.06em;    /* mono uppercase tracking */

  /* ---- Spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;

  /* ---- Layout ---- */
  --container-max: 1200px;        /* Vercel max content */
  --container-narrow: 880px;
  --container-pad: clamp(20px, 5vw, 80px);
  --section-pad-y: clamp(80px, 10vw, 160px);

  /* ---- Grid ---- */
  --grid-gap: clamp(16px, 2vw, 24px);

  /* ---- Radius (Vercel scale) ---- */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  6px;    /* buttons, inputs */
  --radius-lg:  8px;    /* cards, dropdowns */
  --radius-xl:  12px;   /* featured cards, image cards */
  --radius-2xl: 22px;   /* large panels */
  --radius-pill: 9999px;

  /* legacy */
  --radius-pill: 999px;

  /* ---- Shadows (Vercel signature multi-layer) ---- */
  --shadow-flat: none;
  --shadow-border:        0 0 0 1px var(--border-shadow);
  --shadow-border-light:  0 0 0 1px var(--ring-light);
  --shadow-border-strong: 0 0 0 1px var(--border-shadow-strong);
  --shadow-card:          0 0 0 1px var(--border-shadow),
                          0 2px 2px rgba(0,0,0,0.04);
  --shadow-card-stack:    0 0 0 1px var(--border-shadow),
                          0 2px 2px rgba(0,0,0,0.04),
                          0 8px 8px -8px rgba(0,0,0,0.04),
                          0 0 0 1px #fafafa;
  --shadow-focus:         0 0 0 2px var(--accent-focus);
  --shadow-elevated:      0 0 0 1px var(--border-shadow),
                          0 4px 12px rgba(0,0,0,0.08);

  /* legacy shadow tokens (kept for compat — point to new ones) */
  --shadow-sm: var(--shadow-border);
  --shadow-md: var(--shadow-card);
  --shadow-lg: var(--shadow-card-stack);
  --shadow-accent: var(--shadow-card);

  /* ---- Motion ---- */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Z-index ---- */
  --z-base: 1;
  --z-sticky: 100;
  --z-overlay: 1000;

  /* ---- Layout metrics ---- */
  --nav-height: 64px;
}