/* =========================================================
   TRTC SEA Demo Hub — Color + Type Foundations
   Rooted in Tencent Cloud brand (Tencent Blue #006EFF) and
   the TDesign token system used across Tencent products.
   ========================================================= */

/* ---------- FONTS ----------
   Tencent Sans is Tencent's corporate typeface (Monotype, 2017).
   We substitute with Inter (Latin) + Noto Sans SC (CJK) as Google Fonts
   fallbacks. Please replace with Tencent Sans TTF in fonts/ if available.
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */
  --brand-blue:        #006EFF;  /* Tencent Cloud primary */
  --brand-blue-600:    #0052D9;  /* TDesign blue-8, hover */
  --brand-blue-700:    #003CAB;  /* press */
  --brand-blue-400:    #4096FF;  /* light accents */
  --brand-blue-200:    #BBDEFF;  /* soft backgrounds */
  --brand-blue-100:    #E0EFFF;  /* tint surfaces */
  --brand-blue-50:     #F2F8FF;  /* hero bg */

  --brand-cyan:        #00C8FF;  /* TRTC cloud gradient stop */
  --brand-aqua:        #29CCCC;  /* accent, AR/beauty module */

  /* ---------- ACCENT (theme-able) ----------
     Customer pages override --accent via inline <style> or JS to apply
     a co-brand color (e.g. Ryt Bank #00C896, AXS #005DAA). Defaults to
     Tencent Blue so non-customer pages render unchanged. */
  --accent:        var(--brand-blue);
  --accent-hover:  var(--brand-blue-600);
  --accent-press:  var(--brand-blue-700);
  --accent-soft:   var(--brand-blue-100);
  --accent-shadow: rgba(0,110,255,.28);

  /* Deep navy used in Tencent Cloud hero backgrounds */
  --brand-navy:        #001A45;
  --brand-navy-2:      #002B7A;
  --brand-ink:         #0F1F3D;  /* body copy on light */

  /* ---------- NEUTRAL SCALE (TDesign gray) ---------- */
  --gray-1:   #FFFFFF;
  --gray-2:   #F3F3F3;
  --gray-3:   #EEEEEE;
  --gray-4:   #E7E7E7;
  --gray-5:   #DCDCDC;
  --gray-6:   #C5C5C5;
  --gray-7:   #A6A6A6;
  --gray-8:   #8B8B8B;
  --gray-9:   #5E5E5E;
  --gray-10:  #383838;
  --gray-11:  #242424;
  --gray-12:  #181818;

  /* ---------- SEMANTIC — LIGHT THEME ---------- */
  --bg:         var(--gray-1);
  --bg-muted:   #F5F7FA;   /* sections, doc panels */
  --bg-sunken:  #EDF0F5;
  --bg-hero:    var(--brand-blue-50);
  --bg-hero-dark: var(--brand-navy);

  --surface:    #FFFFFF;
  --surface-2:  #FAFBFC;
  --border:     #E3E6EB;
  --border-strong: #C9CED6;
  --divider:    #EEF0F3;

  --fg1:  #0F1F3D;   /* primary text */
  --fg2:  #4E5969;   /* secondary text */
  --fg3:  #86909C;   /* tertiary / captions */
  --fg4:  #C9CDD4;   /* disabled */
  --fg-invert: #FFFFFF;
  --link:  var(--brand-blue);
  --link-hover: var(--brand-blue-600);

  /* ---------- STATUS ---------- */
  --success:  #00A870;
  --success-bg: #E8F7F0;
  --warning:  #ED7B2F;
  --warning-bg: #FDF2E6;
  --error:    #E34D59;
  --error-bg: #FCEBEC;
  --info:     var(--brand-blue);
  --info-bg:  var(--brand-blue-100);

  /* ---------- GRADIENTS (hero / product tiles) ---------- */
  --grad-cloud:   linear-gradient(135deg, #00C8FF 0%, #006EFF 60%, #0052D9 100%);
  --grad-hero:    linear-gradient(160deg, #001A45 0%, #003CAB 55%, #006EFF 120%);
  --grad-soft:    linear-gradient(180deg, #F2F8FF 0%, #FFFFFF 100%);
  --grad-product-chat:  linear-gradient(135deg, #4096FF, #0052D9);
  --grad-product-call:  linear-gradient(135deg, #00C8FF, #006EFF);
  --grad-product-tccc:  linear-gradient(135deg, #29CCCC, #0052D9);

  /* ---------- TYPOGRAPHY — FAMILIES ---------- */
  --font-sans: 'Inter', 'Tencent Sans', 'PingFang SC', 'Noto Sans SC',
               -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-cjk:  'Noto Sans SC', 'Tencent Sans', 'PingFang SC', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SCALE ---------- */
  --fs-display-xl:  72px;
  --fs-display-lg:  56px;
  --fs-display:     44px;
  --fs-h1:          36px;
  --fs-h2:          28px;
  --fs-h3:          22px;
  --fs-h4:          18px;
  --fs-body-lg:     17px;
  --fs-body:        15px;
  --fs-body-sm:     13px;
  --fs-caption:     12px;
  --fs-micro:       11px;

  --lh-tight:   1.1;
  --lh-heading: 1.25;
  --lh-body:    1.6;
  --lh-loose:   1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-loose:  0.02em;
  --tracking-eyebrow: 0.12em;

  /* ---------- RADII ---------- */
  --r-xs:  2px;
  --r-sm:  4px;
  --r-md:  6px;    /* TDesign default */
  --r-lg:  10px;
  --r-xl:  14px;
  --r-2xl: 20px;
  --r-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --shadow-1: 0 1px 2px rgba(15,31,61,.06), 0 1px 1px rgba(15,31,61,.04);
  --shadow-2: 0 4px 12px rgba(15,31,61,.08), 0 1px 2px rgba(15,31,61,.04);
  --shadow-3: 0 12px 32px rgba(15,31,61,.10), 0 2px 6px rgba(15,31,61,.06);
  --shadow-4: 0 24px 64px rgba(15,31,61,.14), 0 4px 12px rgba(15,31,61,.08);
  --shadow-blue: 0 12px 32px rgba(0,110,255,.28);

  /* ---------- SPACING (4pt base) ---------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --ease-emphasized: cubic-bezier(.2,0,0,1);
  --ease-enter: cubic-bezier(0,0,.2,1);
  --ease-exit:  cubic-bezier(.4,0,1,1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* =========================================================
   SEMANTIC TYPE ROLES
   ========================================================= */
.h-display-xl, h1.display {
  font-family: var(--font-sans);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 800;
  color: var(--fg1);
}
.h-display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 800; color: var(--fg1); }
h1, .h1 { font-family: var(--font-sans); font-size: var(--fs-h1); line-height: var(--lh-heading); font-weight: 700; letter-spacing: var(--tracking-tight); color: var(--fg1); }
h2, .h2 { font-family: var(--font-sans); font-size: var(--fs-h2); line-height: var(--lh-heading); font-weight: 700; color: var(--fg1); }
h3, .h3 { font-family: var(--font-sans); font-size: var(--fs-h3); line-height: var(--lh-heading); font-weight: 600; color: var(--fg1); }
h4, .h4 { font-family: var(--font-sans); font-size: var(--fs-h4); line-height: var(--lh-heading); font-weight: 600; color: var(--fg1); }
p, .body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg2); }
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--fg2); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--fg2); }
.caption { font-size: var(--fs-caption); color: var(--fg3); letter-spacing: var(--tracking-loose); }
.eyebrow  { font-size: var(--fs-caption); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--brand-blue); }
code, .code, pre { font-family: var(--font-mono); font-size: 13px; }
.code-inline { background: var(--bg-muted); padding: 2px 6px; border-radius: var(--r-sm); border: 1px solid var(--border); }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: var(--font-sans); color: var(--fg1); background: var(--bg); -webkit-font-smoothing: antialiased; }