/* ==========================================================
   TAIWAN MILHAS — Design Tokens v2.0
   Luxury Dark Theme · Cyan + Deep Blue Identity
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,700;0,800;1,700&display=swap');

:root {
  /* ── Brand Colors (Logo Identity) ── */
  --cyan: #00A5C4;
  --cyan-light: #33D4F0;
  --cyan-dark: #007B93;
  --blue-deep: #062A78;
  --blue-royal: #0A3B9E;
  --blue-midnight: #041B52;

  /* ── Accent Palette ── */
  --gold: #F5B731;
  --gold-light: #FFD770;
  --emerald: #34D399;
  --coral: #FF6B6B;
  --violet: #8B5CF6;

  /* ── Backgrounds ── */
  --bg-void: #020B1A;
  --bg-deep: #041224;
  --bg-surface: #081D3A;
  --bg-card: #0A2548;
  --bg-elevated: #0D2F5A;
  --bg-glass: rgba(8, 29, 58, 0.65);
  --bg-glass-strong: rgba(8, 29, 58, 0.85);

  /* ── Text ── */
  --text-white: #FFFFFF;
  --text-primary: #F0F4FA;
  --text-secondary: #94A8C8;
  --text-muted: #5C7499;
  --text-accent: var(--cyan-light);

  /* ── Borders ── */
  --border-subtle: rgba(148, 168, 200, 0.08);
  --border-medium: rgba(148, 168, 200, 0.15);
  --border-strong: rgba(148, 168, 200, 0.25);
  --border-brand: rgba(0, 165, 196, 0.35);
  --border-glow: rgba(0, 165, 196, 0.6);

  /* ── Typography ── */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;

  --fs-xs: 0.75rem;    /* 12px */
  --fs-sm: 0.875rem;   /* 14px */
  --fs-base: 1rem;     /* 16px */
  --fs-md: 1.125rem;   /* 18px */
  --fs-lg: 1.25rem;    /* 20px */
  --fs-xl: 1.5rem;     /* 24px */
  --fs-2xl: 2rem;      /* 32px */
  --fs-3xl: 2.75rem;   /* 44px */
  --fs-4xl: 3.5rem;    /* 56px */
  --fs-5xl: 4.5rem;    /* 72px */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.6;
  --lh-relaxed: 1.8;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.05em;
  --ls-wider: 0.1em;

  /* ── Spacing ── */
  --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;
  --sp-32: 128px;

  /* ── Radii ── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.5);
  --shadow-xl: 0 16px 50px rgba(0,0,0,0.6);
  --shadow-2xl: 0 25px 80px rgba(0,0,0,0.7);

  /* ── Glows ── */
  --glow-cyan: 0 0 30px rgba(0, 165, 196, 0.3);
  --glow-cyan-strong: 0 0 60px rgba(0, 165, 196, 0.5);
  --glow-gold: 0 0 30px rgba(245, 183, 49, 0.25);
  --glow-card: 0 4px 40px rgba(0, 0, 0, 0.3);

  /* ── Gradients ── */
  --grad-hero: linear-gradient(135deg, var(--bg-void) 0%, var(--blue-midnight) 50%, var(--bg-deep) 100%);
  --grad-brand: linear-gradient(135deg, var(--cyan) 0%, var(--cyan-light) 100%);
  --grad-brand-diagonal: linear-gradient(145deg, var(--cyan-dark), var(--cyan), var(--cyan-light));
  --grad-gold: linear-gradient(135deg, var(--gold), var(--gold-light));
  --grad-text: linear-gradient(135deg, var(--text-white) 30%, var(--cyan-light) 100%);
  --grad-surface: linear-gradient(180deg, var(--bg-surface), var(--bg-deep));

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --tr-fast: 150ms var(--ease-out);
  --tr-normal: 300ms var(--ease-out);
  --tr-slow: 500ms var(--ease-out);
  --tr-xslow: 800ms var(--ease-out);

  /* ── Layout ── */
  --max-w: 1200px;
  --max-w-narrow: 780px;
  --max-w-wide: 1400px;
  --header-h: 72px;
}