/**
 * FKI Traders Sdn. Bhd. - Design Tokens
 * Light Theme System (Source: Brand Palette Sheet & Revision Specification)
 */

:root {
  /* Brand colors (from brand sheet) */
  --brand-blue:       #0B3D91;   /* Primary Blue */
  --brand-blue-2:     #1E6FD1;   /* Secondary Blue */
  --brand-gold:       #D4AF37;   /* Gold accent */
  --brand-gold-light: #F6E39A;   /* Gold gradient end */
  --charcoal:         #1A1A1A;   /* Charcoal / text */
  --white:            #FFFFFF;
  --gray-50:          #F4F6FA;   /* Light Gray backgrounds */

  /* Light-to-dark page depth (backgrounds go from lightest at top to slightly deeper near the bottom) */
  --bg-0: #FFFFFF;   /* header, hero, first sections */
  --bg-1: #F4F6FA;   /* alternate sections */
  --bg-2: #EBF0F8;   /* mid-page tint */
  --bg-3: #E1E8F3;   /* last section before footer (CTA band) */
  --bg-footer: #1A1A1A;   /* footer (black/charcoal) */
  --bg-footer-bar: #101010; /* footer bottom bar */

  /* Text */
  --text-900: #1A1A1A;   /* headings, nav links */
  --text-700: #333B4A;   /* body text */
  --text-500: #5D6678;   /* secondary text */
  --text-on-dark: #F2F4F8;       /* text on footer */
  --text-on-dark-muted: #A9B0BD; /* muted text on footer */
  --gold-text: #9C7A12;  /* gold used AS TEXT on light backgrounds (passes contrast) */

  /* Lines and shadows */
  --line: #DDE3EE;
  --shadow-sm: 0 4px 14px rgba(26, 26, 26, 0.06);
  --shadow-md: 0 12px 32px rgba(11, 61, 145, 0.10);
  --shadow-lg: 0 20px 48px rgba(11, 61, 145, 0.16);

  /* Gradients (from brand sheet) */
  --grad-blue: linear-gradient(135deg, #0B3D91 0%, #1E6FD1 100%);
  --grad-gold: linear-gradient(135deg, #D4AF37 0%, #F6E39A 100%);
  --grad-page-soft: linear-gradient(180deg, #FFFFFF 0%, #F4F6FA 100%);

  /* Typography */
  --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Header offsets */
  --header-height: 80px;
  --header-height-mobile: 68px;

  /* Fluid Type Scale */
  --text-h1: clamp(2.1rem, 4.5vw + 1rem, 4.2rem);
  --text-h2: clamp(1.7rem, 2.8vw + 0.8rem, 2.8rem);
  --text-h3: clamp(1.15rem, 1.2vw + 0.8rem, 1.4rem);
  --text-eyebrow: clamp(0.75rem, 0.4vw + 0.65rem, 0.85rem);
  --text-body: clamp(1rem, 0.3vw + 0.95rem, 1.0625rem);
  --text-caption: 0.85rem;
  --text-button: 0.95rem;

  /* Line Heights */
  --lh-h1: 1.15;
  --lh-h2: 1.22;
  --lh-h3: 1.32;
  --lh-body: 1.7;
  --lh-caption: 1.5;

  /* Layout & Sizing */
  --container-max: 1240px;
  --container-pad: 20px;
  --section-pad-y: 72px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-button: 10px;
  --radius-card: 14px;
  --radius-image: 14px;
  --radius-full: 9999px;

  /* Focus & Accents */
  --focus-ring: 0 0 0 3px rgba(30, 111, 209, 0.45);

  /* Animation & Transitions */
  --ease-smooth: cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition-fast: 250ms var(--ease-smooth);
  --transition-normal: 350ms var(--ease-smooth);
  --transition-slow: 600ms var(--ease-smooth);
}

@media (min-width: 768px) {
  :root {
    --container-pad: 32px;
    --section-pad-y: 96px;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-pad: 48px;
    --section-pad-y: 120px;
  }
}