/* C.T. Lee & Associates — Design Tokens
   Palette: Deep navy canvas, warm gold accent, cream paper, ink black type.
   Feel: Editorial law firm. Premium. Trustworthy. Not corporate.
   Type: Cormorant Garamond display (editorial serif) + Inter body + Noto Sans SC (zh). */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap');

:root {
  /* ── Color palette ───────────────────────────────────────────────────── */
  --navy:         #0A2540;     /* primary dark -- nav, headings, buttons */
  --navy-deep:    #05172B;     /* deepest navy -- hero overlay, footer */
  --navy-soft:    #13355b;     /* softened navy -- hover states */
  --navy-ink:     #0e1f3a;     /* navy-tinged text on cream */

  --gold:         #B8954C;     /* primary gold -- accents, rules, borders */
  --gold-warm:    #C9A35A;     /* warm gold -- secondary button */
  --gold-light:   #D4B875;     /* lighter gold -- hover, highlights */
  --gold-soft:    #EBD9AC;     /* muted gold -- backgrounds, badges */
  --gold-glow:    rgba(184,149,76,0.18);

  --cream:        #F6F1E7;     /* warm cream -- primary canvas */
  --cream-deep:   #EEE6D3;     /* deeper cream -- alternate panels */
  --paper:        #FBF7EE;     /* paper -- card backgrounds */
  --white:        #FFFFFF;     /* clean white */

  --ink:          #15171A;     /* body text -- near-black, warm */
  --ink-soft:     #2A2C31;     /* softer ink */
  --stone:        #6B7280;     /* muted / secondary text */
  --line:         #E5E2D9;     /* default border on cream */
  --line-soft:    #EFECE3;     /* softer border */

  --success:      #2d7a52;
  --warn:         #b87100;
  --danger:       #b42e2e;

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-cn:      'Noto Sans SC', 'Inter', system-ui, sans-serif;

  /* Fluid type scale */
  --text-hero:    clamp(2.6rem, 6vw, 4.75rem);
  --text-display: clamp(2rem, 4.5vw, 3.5rem);
  --text-heading: clamp(1.5rem, 3vw, 2.25rem);
  --text-sub:     clamp(1.05rem, 1.6vw, 1.3rem);
  --text-body:    clamp(0.95rem, 1.1vw, 1.0625rem);
  --text-small:   clamp(0.82rem, 0.9vw, 0.9rem);
  --text-micro:   clamp(0.7rem, 0.78vw, 0.75rem);
  --text-nav:     0.82rem;

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  --tracking-tight:   -0.015em;
  --tracking-normal:   0;
  --tracking-wide:     0.06em;
  --tracking-wider:    0.14em;
  --tracking-widest:   0.28em;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Spacing ─────────────────────────────────────────────────────────── */
  --space-2xs:  clamp(0.25rem, 0.5vw, 0.5rem);
  --space-xs:   clamp(0.5rem, 1vw, 0.75rem);
  --space-sm:   clamp(1rem, 2vw, 1.5rem);
  --space-md:   clamp(2rem, 4vw, 3rem);
  --space-lg:   clamp(4rem, 8vw, 6rem);
  --space-xl:   clamp(6rem, 12vw, 9rem);
  --space-2xl:  clamp(8rem, 16vw, 12rem);

  --section-pad: clamp(4.5rem, 9vh, 7rem);
  --gutter:      clamp(1.25rem, 4vw, 3.5rem);

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --max-width:     1280px;
  --content-width:  880px;
  --narrow-width:   620px;
  --nav-height:    76px;

  /* ── Borders & radius ─────────────────────────────────────────────────── */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-xl:  16px;
  --border-subtle: 1px solid var(--line);
  --border-gold:   1px solid rgba(184,149,76,0.3);

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth:  cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);

  --duration-fast:   0.18s;
  --duration-normal: 0.3s;
  --duration-slow:   0.6s;
  --duration-reveal: 0.9s;

  /* ── Shadows ─────────────────────────────────────────────────────────── */
  --shadow-sm:  0 2px 6px rgba(10,37,64,0.06);
  --shadow-md:  0 8px 24px rgba(10,37,64,0.08);
  --shadow-lg:  0 24px 60px rgba(10,37,64,0.12);
  --shadow-gold: 0 4px 20px rgba(184,149,76,0.2);
}

/* ── Base reset ────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 12px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--ink);
  background-color: var(--cream);
  overflow-x: hidden;
}

body[data-lang="zh"] { font-family: var(--font-cn); }

::selection { background: var(--gold); color: var(--navy-deep); }

img, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }