/* ==========================================================================
   YPJ Portal — Design Tokens (variables.css)
   YPJ Corporate: Royal Blue · Gold · Red — Modern Malaysian Government
   ========================================================================== */

:root {
  /* -----------------------------------------------------------------------
     Colors — Primary Palette (Royal Navy Blue)
     ----------------------------------------------------------------------- */
  --color-primary: #0d2b6e;           /* Royal navy blue */
  --color-primary-dark: #071a44;      /* Deep navy */
  --color-primary-light: #1a3a8f;     /* Medium navy */

  /* -----------------------------------------------------------------------
     Colors — Accent (Interactive Blue)
     ----------------------------------------------------------------------- */
  --color-accent: #1a56db;            /* Vibrant royal blue */
  --color-accent-dark: #1447b8;       /* Darker interactive */
  --color-accent-light: #93c5fd;      /* Sky blue highlight */
  --color-accent-glow: rgba(26, 86, 219, 0.12);

  /* -----------------------------------------------------------------------
     Colors — Gold (YPJ Prestige)
     ----------------------------------------------------------------------- */
  --color-gold: #c8992a;
  --color-gold-light: #e5b94a;
  --color-gold-dark: #9d7520;
  --color-gold-glow: rgba(200, 153, 42, 0.14);

  /* -----------------------------------------------------------------------
     Colors — Red (YPJ Corporate Red — status, highlights)
     ----------------------------------------------------------------------- */
  --color-red: #c0392b;
  --color-red-dark: #922b21;
  --color-red-light: rgba(192, 57, 43, 0.1);

  /* -----------------------------------------------------------------------
     Colors — Semantic
     ----------------------------------------------------------------------- */
  --color-success: #15803d;
  --color-success-light: rgba(21, 128, 61, 0.1);
  --color-warning: #c8992a;
  --color-warning-light: rgba(200, 153, 42, 0.12);
  --color-danger: #c0392b;
  --color-danger-light: rgba(192, 57, 43, 0.1);
  --color-info: #1a56db;
  --color-info-light: rgba(26, 86, 219, 0.1);

  /* -----------------------------------------------------------------------
     Colors — Neutrals & Surfaces (Cool white — corporate feel)
     ----------------------------------------------------------------------- */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-bg: #f7f9ff;               /* Cool white with blue tint */
  --color-bg-alt: #edf0f8;           /* Light blue-gray alt sections */
  --color-surface: #ffffff;
  --color-surface-hover: #f0f4ff;
  --color-border: #d0d8f0;
  --color-border-light: #e4e9f5;

  /* -----------------------------------------------------------------------
     Colors — Typography (Navy-tinted near-black)
     ----------------------------------------------------------------------- */
  --color-text: #1a1f36;             /* Deep navy-tinted black */
  --color-text-secondary: #4b5276;   /* Medium blue-gray */
  --color-text-muted: #8892b0;       /* Muted blue-gray */
  --color-text-on-dark: #ffffff;
  --color-text-on-dark-secondary: rgba(255, 255, 255, 0.75);
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.45);

  /* -----------------------------------------------------------------------
     Typography — Playfair Display (headings) + Inter (body)
     ----------------------------------------------------------------------- */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* -----------------------------------------------------------------------
     Font Sizes
     ----------------------------------------------------------------------- */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.5rem;
  --fs-4xl: 3rem;
  --fs-5xl: 3.75rem;
  --fs-hero: clamp(2.75rem, 5.5vw, 4.75rem);

  /* -----------------------------------------------------------------------
     Font Weights
     ----------------------------------------------------------------------- */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* -----------------------------------------------------------------------
     Line Heights
     ----------------------------------------------------------------------- */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  /* -----------------------------------------------------------------------
     Letter Spacing
     ----------------------------------------------------------------------- */
  --ls-tight: -0.025em;
  --ls-normal: 0;
  --ls-wide: 0.025em;
  --ls-wider: 0.05em;
  --ls-widest: 0.1em;

  /* -----------------------------------------------------------------------
     Spacing Scale
     ----------------------------------------------------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* -----------------------------------------------------------------------
     Layout
     ----------------------------------------------------------------------- */
  --container-max: 1280px;
  --container-wide: 1440px;
  --container-narrow: 768px;
  --container-padding: 1.5rem;
  --section-padding: clamp(4rem, 8vw, 7rem);
  --header-height: 80px;
  --top-bar-height: 36px;

  /* -----------------------------------------------------------------------
     Borders & Radius
     ----------------------------------------------------------------------- */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 100rem;

  /* -----------------------------------------------------------------------
     Shadows — Blue-tinted corporate
     ----------------------------------------------------------------------- */
  --shadow-sm: 0 1px 3px rgba(13, 43, 110, 0.06);
  --shadow-md: 0 4px 12px rgba(13, 43, 110, 0.08);
  --shadow-lg: 0 8px 30px rgba(13, 43, 110, 0.1);
  --shadow-xl: 0 20px 60px rgba(13, 43, 110, 0.12);
  --shadow-2xl: 0 30px 80px rgba(13, 43, 110, 0.18);
  --shadow-glow: 0 0 40px rgba(26, 86, 219, 0.15);
  --shadow-glow-lg: 0 0 80px rgba(26, 86, 219, 0.25);
  --shadow-card: 0 2px 12px rgba(13, 43, 110, 0.07);
  --shadow-card-hover: 0 10px 36px rgba(13, 43, 110, 0.14);
  --shadow-btn: 0 4px 14px rgba(26, 86, 219, 0.35);
  --shadow-btn-hover: 0 8px 24px rgba(26, 86, 219, 0.45);

  /* -----------------------------------------------------------------------
     Transitions
     ----------------------------------------------------------------------- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-smooth: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  /* -----------------------------------------------------------------------
     Z-Index Scale
     ----------------------------------------------------------------------- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-header: 500;
  --z-toast: 600;
  --z-max: 9999;
}