/* ============================================================
   ScreenSync Design System — Foundations
   Typography + Color tokens
   Aesthetic: dark-first · cinematic black · blue/purple glow
   Brand accent: ScreenSync Blue (#326BFB) + Violet (#632288)
   Type: Clash Display (display) · Manrope (text) · Poppins (UI)
        · Noto Sans SC (中文)
   Use case: bilingual (EN / 中文) product landing pages
   Source of truth: "ScreenSync Landing.fig"
   ============================================================ */

/* ---------- Webfonts ----------
   Clash Display  → local woff/ttf (the distinctive display + eyebrow face)
   Manrope        → Google   (headings + body workhorse)
   Poppins        → Google   (buttons, nav, dense UI)
   Noto Sans SC   → Google   (the canonical Chinese face)                    */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Poppins:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700&display=swap");

/* Local display + mono + logo faces. */
@font-face {
  font-family: "Clash Display";
  src: url("fonts/ClashDisplay-Variable.ttf") format("truetype");
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}

/* Local mono — retained for code, counts, metadata. */
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
/* Logo wordmark ONLY — heavy grotesque display face. Never for UI/body. */
@font-face {
  font-family: "Archivo Black";
  src: url("fonts/ArchivoBlack-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

:root {
  /* ===========================================================
     1. BRAND
     ScreenSync Blue is the single loud accent; Violet is its
     companion — together they form the ambient hero glow.
     =========================================================== */
  --brand: #326bfb;            /* ScreenSync Blue — rgb(50,107,251) */
  --brand-strong: #1f54e3;     /* pressed / active */
  --brand-tint: #6f98ff;       /* lighter, hovers on dark */
  --brand-soft: #e8efff;       /* faint wash, light surfaces */
  --brand-soft-border: #cdddff;
  --brand-fg: #ffffff;         /* text on brand fills */

  --violet: #632288;           /* secondary accent — rgb(99,34,136) */
  --violet-strong: #4d1a6b;
  --violet-tint: #9a5cbf;

  /* Ambient glow — blue + violet blurred orbs behind dark sections */
  --glow-blue:   rgba(50, 107, 251, 0.45);
  --glow-violet: rgba(99, 34, 136, 0.45);
  --glow-hero: radial-gradient(60% 60% at 70% 30%, var(--glow-blue) 0%, transparent 70%),
               radial-gradient(50% 50% at 30% 60%, var(--glow-violet) 0%, transparent 70%);

  /* ===========================================================
     2. NEUTRAL SCALE  (1 = near-black … 12 = white)
     Dark-first: the scale runs UP toward white, the way the
     product is composed on black.
     =========================================================== */
  --gray-1:  #050506;   /* deepest, behind black */
  --gray-2:  #0d0d0e;
  --gray-3:  #161618;
  --gray-4:  #202023;
  --gray-5:  #2c2c30;
  --gray-6:  #3a3a3f;
  --gray-7:  #56565c;
  --gray-8:  #7a7a80;
  --gray-9:  #9b9ba1;
  --gray-10: #c2c2c6;
  --gray-11: #e2e2e4;
  --gray-12: #ffffff;

  /* Warm "paper" accents — pulled from the product imagery, for the
     rare light/editorial section. Use sparingly. */
  --sand-bg:    #f0ece3;   /* rgb(240,236,227) */
  --sand-line:  #c3beac;   /* rgb(195,190,172) */
  --sand-fg:    #61605d;   /* rgb(97,96,93)   */
  --sand-muted: #817e73;   /* rgb(129,126,115) */

  /* ===========================================================
     3. SEMANTIC SURFACE / TEXT  (DARK is the default theme)
     =========================================================== */
  --bg:           #000000;   /* page background */
  --bg-subtle:    #0a0a0b;   /* alt sections */
  --bg-elevated:  #121214;   /* cards, popovers, product window */
  --bg-inset:     #1a1a1d;   /* wells, code, inputs */
  --bg-hover:     #1c1c20;   /* row / item hover */

  --fg:           #ffffff;                    /* primary text */
  --fg-secondary: rgba(255, 255, 255, 0.6);   /* secondary — the file's #1 pairing */
  --fg-muted:     rgba(255, 255, 255, 0.4);   /* tertiary / placeholder */
  --fg-faint:     rgba(255, 255, 255, 0.28);  /* disabled */
  --fg-inverse:   #000000;                    /* text on light fills */

  --border:        rgba(255, 255, 255, 0.12); /* hairline dividers */
  --border-strong: rgba(255, 255, 255, 0.24); /* inputs, stronger lines */
  --border-focus:  var(--brand);

  /* ===========================================================
     4. STATUS COLORS
     =========================================================== */
  --success:        #00ac47;   /* rgb(0,172,71) — from the file */
  --success-soft:   rgba(0, 172, 71, 0.16);
  --warning:        #ffba00;   /* rgb(255,186,0) */
  --warning-soft:   rgba(255, 186, 0, 0.16);
  --error:          #ff5555;   /* rgb(255,85,85) — the sparkle/alert red */
  --error-soft:     rgba(255, 85, 85, 0.16);
  --info:           var(--brand);
  --info-soft:      var(--brand-soft);

  /* ===========================================================
     5. RADII
     Plugin/app UI controls sit at 8px (--radius-md), containers at
     12px (--radius-lg). The 55px pill is the MARKETING CTA only.
     =========================================================== */
  --radius-xs: 4px;
  --radius-sm: 6px;      /* chips, tags, small controls */
  --radius-md: 8px;      /* buttons, inputs, menu items — plugin UI controls */
  --radius-lg: 12px;     /* cards, dropdown panels, standard containers */
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 55px;   /* marketing CTA pill (landing hero only) */
  --radius-full: 9999px;

  /* ===========================================================
     6. SHADOWS + GLOW  (dark-surface tuned)
     =========================================================== */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 24px 56px rgba(0,0,0,0.6);
  --shadow-xl: 0 40px 96px rgba(0,0,0,0.7);
  --shadow-brand: 0 8px 32px rgba(50,107,251,0.45);   /* CTA glow */
  --ring-focus: 0 0 0 3px rgba(50,107,251,0.40);

  /* ===========================================================
     7. SPACING  (4px base grid)
     =========================================================== */
  --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;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;   /* the file's section rhythm (gap:128) */

  /* ===========================================================
     8. TYPOGRAPHY — families & weights
     =========================================================== */
  /* Display + eyebrows — the recognizable ScreenSync face */
  --font-display: "Clash Display", "Manrope", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  /* Headings + body workhorse (Latin); CJK falls through to Noto Sans SC */
  --font-sans: "Manrope", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  /* Buttons, nav, dense UI controls */
  --font-ui: "Poppins", "Noto Sans SC", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  /* Chinese — Noto Sans SC (canonical), then native CJK fallbacks */
  --font-cjk: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  /* Metadata / code / counts */
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Wordmark — the "ScreenSync" lockup. Archivo Black, near-zero tracking. */
  --font-logo: "Archivo Black", "Clash Display", system-ui, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ===========================================================
     9. TYPE SCALE — semantic roles
        size / line-height / tracking / weight
        (mirrors the .fig: Manrope Bold 64 headings, Clash 54
         display numerals, Clash 18 eyebrows +0.16em, PuHuiTi
         24/20 CJK titles, Manrope 18/16 body)
     =========================================================== */
  --display-size: 56px;  --display-lh: 1.05/* @kind font */;  --display-ls: -0.01em;   --display-wt: 700/* @kind font */;
  --h1-size: 46px;       --h1-lh: 1.1/* @kind font */;        --h1-ls: -0.018em;       --h1-wt: 600/* @kind font */;
  --h2-size: 34px;       --h2-lh: 1.15/* @kind font */;       --h2-ls: -0.018em;       --h2-wt: 700/* @kind font */;
  --h3-size: 24px;       --h3-lh: 1.4/* @kind font */;        --h3-ls: -0.018em;       --h3-wt: 600/* @kind font */;
  --h4-size: 20px;       --h4-lh: 1.5/* @kind font */;        --h4-ls: -0.018em;       --h4-wt: 600/* @kind font */;
  --feature-size: 18px;  --feature-lh: 1.5/* @kind font */;   --feature-wt: 600/* @kind font */;
  --body-lg-size: 16px;  --body-lg-lh: 1.8/* @kind font */;
  --body-size: 15px;     --body-lh: 1.7/* @kind font */;
  --body-sm-size: 13px;  --body-sm-lh: 1.6/* @kind font */;
  --caption-size: 13px;  --caption-lh: 1.5/* @kind font */;
  --mono-size: 13px;     --mono-lh: 1.5/* @kind font */;
  --eyebrow-size: 15px;  --eyebrow-ls: 0.16em;   /* Clash Display Medium eyebrow */
  --label-size: 12px;    --label-ls: 0.08em;     /* mono uppercase tag */
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.ds-display {
  font-family: var(--font-display);
  font-size: var(--display-size);
  line-height: var(--display-lh);
  letter-spacing: var(--display-ls);
  font-weight: var(--display-wt);
  color: var(--fg);
}
.ds-h1 { font-family: var(--font-sans); font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: var(--h1-ls); font-weight: var(--h1-wt); color: var(--fg); }
.ds-h2 { font-family: var(--font-sans); font-size: var(--h2-size); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); font-weight: var(--h2-wt); color: var(--fg); }
.ds-h3 { font-family: var(--font-sans); font-size: var(--h3-size); line-height: var(--h3-lh); letter-spacing: var(--h3-ls); font-weight: var(--h3-wt); color: var(--fg); }
.ds-h4 { font-family: var(--font-sans); font-size: var(--h4-size); line-height: var(--h4-lh); letter-spacing: var(--h4-ls); font-weight: var(--h4-wt); color: var(--fg); }
/* Feature/card title — CJK SemiBold (Noto Sans SC) */
.ds-feature-title { font-family: var(--font-cjk); font-size: var(--feature-size); line-height: var(--feature-lh); font-weight: var(--feature-wt); color: var(--fg); }
.ds-body-lg { font-family: var(--font-sans); font-size: var(--body-lg-size); line-height: var(--body-lg-lh); font-weight: 400; color: var(--fg); }
.ds-body { font-family: var(--font-sans); font-size: var(--body-size); line-height: var(--body-lh); font-weight: 400; color: var(--fg); }
.ds-body-sm { font-family: var(--font-sans); font-size: var(--body-sm-size); line-height: var(--body-sm-lh); font-weight: 400; color: var(--fg-secondary); }
.ds-caption { font-family: var(--font-ui); font-size: var(--caption-size); line-height: var(--caption-lh); font-weight: 400; color: var(--fg-muted); }
/* UI text — nav links, controls (Poppins) */
.ds-ui { font-family: var(--font-ui); font-size: var(--body-size); font-weight: 500; color: var(--fg); }
/* Eyebrow — Clash Display Medium, wide tracking, brand blue */
.ds-eyebrow {
  font-family: var(--font-display);
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-ls);
  font-weight: 500;
  color: var(--brand);
}
/* Mono uppercase tag/label */
.ds-label {
  font-family: var(--font-mono);
  font-size: var(--label-size);
  letter-spacing: var(--label-ls);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-muted);
}
.ds-mono { font-family: var(--font-mono); font-size: var(--mono-size); line-height: var(--mono-lh); font-weight: 400; }
/* Big translucent step numeral — Clash Display Semibold at 18% opacity */
.ds-numeral { font-family: var(--font-display); font-weight: 600; font-size: 46px; line-height: 1; letter-spacing: -0.018em; color: var(--fg); opacity: 0.18; }
/* Wordmark — the "ScreenSync" lockup. */
/* Wordmark — the "ScreenSync" lockup. Archivo Black (single weight), tight. */
.ds-wordmark { font-family: var(--font-logo); font-weight: 400; letter-spacing: -0.01em; color: var(--fg); }
code, .ds-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 0.1em 0.4em;
  color: var(--fg);
}

/* ============================================================
   LIGHT SURFACE  — apply .ds-light to invert onto white.
   The product is dark by default; light is the exception
   (docs, editorial, light marketing sections).
   ============================================================ */
.ds-light {
  --bg:           #ffffff;
  --bg-subtle:    #fafafa;
  --bg-elevated:  #ffffff;
  --bg-inset:     #f4f4f5;
  --bg-hover:     #f4f4f5;

  --fg:           #0d0d0e;
  --fg-secondary: rgba(13, 13, 14, 0.64);
  --fg-muted:     rgba(13, 13, 14, 0.45);
  --fg-faint:     rgba(13, 13, 14, 0.3);
  --fg-inverse:   #ffffff;

  --border:        rgba(13, 13, 14, 0.1);
  --border-strong: rgba(13, 13, 14, 0.2);

  --brand-soft: #e8efff;
  --brand-soft-border: #cdddff;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.1);
  --shadow-xl: 0 24px 56px rgba(0,0,0,0.12);

  background: var(--bg);
  color: var(--fg);
}

/* "Paper" editorial surface — warm sand, pulled from product imagery. */
.ds-paper {
  --bg:           var(--sand-bg);
  --bg-subtle:    #e9e4d8;
  --bg-elevated:  #f6f3ec;
  --fg:           #2b2a27;
  --fg-secondary: var(--sand-fg);
  --fg-muted:     var(--sand-muted);
  --border:       var(--sand-line);
  background: var(--bg);
  color: var(--fg);
}

/* Backwards-compat: earlier markup used `.ds-dark` to opt a section INTO the
   dark theme (when light was the default). Dark is now the default, so
   `.ds-dark` simply re-asserts the dark surface — keeps old kits rendering. */
.ds-dark {
  --bg: #000000; --bg-subtle: #0a0a0b; --bg-elevated: #121214; --bg-inset: #1a1a1d; --bg-hover: #1c1c20;
  --fg: #ffffff; --fg-secondary: rgba(255,255,255,0.6); --fg-muted: rgba(255,255,255,0.4); --fg-faint: rgba(255,255,255,0.28); --fg-inverse: #000000;
  --border: rgba(255,255,255,0.12); --border-strong: rgba(255,255,255,0.24);
  background: var(--bg); color: var(--fg);
}

/* ============================================================
   BILINGUAL / CJK TYPOGRAPHY
   Latin tracking looks wrong on Han characters. Under lang="zh",
   relax tracking and add line-height so glyphs breathe. Set
   document.documentElement.lang = "zh" / "en" to switch.
   ============================================================ */
:lang(zh) {
  font-feature-settings: normal;
}
:lang(zh) .ds-display,
:lang(zh) .ds-h1,
:lang(zh) .ds-h2 { letter-spacing: 0; line-height: 1.3; }
:lang(zh) .ds-h3,
:lang(zh) .ds-h4,
:lang(zh) .ds-feature-title { letter-spacing: 0; line-height: 1.5; }
:lang(zh) .ds-body-lg,
:lang(zh) .ds-body { letter-spacing: 0; line-height: 1.8; }
:lang(zh) .ds-body-sm,
:lang(zh) .ds-caption { letter-spacing: 0; line-height: 1.7; }
/* Eyebrow keeps its Clash tracking (it stays Latin: "Installation"); but
   drop uppercasing on mono labels in Chinese. */
:lang(zh) .ds-label { text-transform: none; letter-spacing: 0.02em; }