/*
 * Dolphin MPS design tokens — shared site-wide values.
 * Official Dolphin colors: #0698C7 (light), #005A96 (dark).
 * Official BHL colors:     #0072BC (blue), #F69320 (brick orange).
 * Keep these four brand HEX values unchanged. Shades below are UI derivatives.
 */
:root {
  /* ==========================================================
     OFFICIAL BRAND COLORS — SOURCE OF TRUTH
     ========================================================== */
  --dmps-color-dolphin-light: #0698c7;
  --dmps-color-dolphin-dark: #005a96;
  --dmps-color-bhl-blue: #0072bc;
  --dmps-color-bhl-brick: #f69320;

  /* ==========================================================
     UI SHADES — DERIVED, NOT OFFICIAL BRAND COLORS
     Strong shades support hover states and readable accent text.
     ========================================================== */
  --dmps-color-dolphin-dark-strong: #004978;
  --dmps-color-dolphin-light-strong: #007ea6;
  --dmps-color-bhl-brick-strong: #e17a0b;
  --dmps-color-accent-text: #a44900; /* Accessible orange text on white */

  /* ==========================================================
     SUPPORTING PALETTE — NEUTRALS / DARK SURFACES / STATUS
     Navy colors remain supporting backgrounds, NOT brand blues.
     ========================================================== */
  --dmps-color-navy-950: #07162d;
  --dmps-color-navy-900: #0a1e3d;
  --dmps-color-navy-800: #102b54;
  --dmps-color-white: #ffffff;
  --dmps-color-surface: #f5f8fc;
  --dmps-color-surface-strong: #e9f0f8;
  --dmps-color-text: #17243a;
  --dmps-color-text-muted: #5e6d82;
  --dmps-color-border: #d9e2ee;
  --dmps-color-danger: #b42318;

  /* ==========================================================
     LEGACY PALETTE ALIASES — TEMPORARY BACKWARD COMPATIBILITY
     Existing page CSS continues to resolve to the new brand palette.
     New CSS should use semantic roles below, not these aliases.
     ========================================================== */
  --dmps-color-blue-700: var(--dmps-color-dolphin-dark);
  --dmps-color-blue-600: var(--dmps-color-bhl-blue);
  --dmps-color-cyan-500: var(--dmps-color-dolphin-light-strong);
  --dmps-color-cyan-400: var(--dmps-color-dolphin-light);
  --dmps-color-gold-500: var(--dmps-color-bhl-brick);

  /* ==========================================================
     RGB CHANNELS FOR TRANSPARENT OVERLAYS
     Usage: rgb(var(--dmps-rgb-primary) / 0.20)
     ========================================================== */
  --dmps-rgb-dolphin-light: 6 152 199;
  --dmps-rgb-dolphin-dark: 0 90 150;
  --dmps-rgb-bhl-blue: 0 114 188;
  --dmps-rgb-bhl-brick: 246 147 32;
  --dmps-rgb-primary: var(--dmps-rgb-dolphin-dark);
  --dmps-rgb-secondary: var(--dmps-rgb-dolphin-light);
  --dmps-rgb-accent: var(--dmps-rgb-bhl-brick);
  --dmps-rgb-navy-950: 7 22 45;
  --dmps-rgb-navy-900: 10 30 61;
  --dmps-rgb-cyan-400: var(--dmps-rgb-dolphin-light); /* Legacy */
  --dmps-rgb-white: 255 255 255;

  /* ==========================================================
     SEMANTIC ROLES — USE THESE FIRST IN PAGE / COMPONENT CSS
     ========================================================== */
  --dmps-color-primary: var(--dmps-color-dolphin-dark);
  --dmps-color-primary-strong: var(--dmps-color-dolphin-dark-strong);
  --dmps-color-secondary: var(--dmps-color-dolphin-light);
  --dmps-color-secondary-strong: var(--dmps-color-dolphin-light-strong);

  --dmps-color-accent: var(--dmps-color-bhl-brick);
  --dmps-color-accent-strong: var(--dmps-color-bhl-brick-strong);
  --dmps-color-accent-secondary: var(--dmps-color-dolphin-light);
  --dmps-color-distributor: var(--dmps-color-bhl-blue);

  --dmps-color-on-primary: var(--dmps-color-white);
  --dmps-color-on-secondary: var(--dmps-color-navy-950);
  --dmps-color-on-accent: var(--dmps-color-navy-950);
  --dmps-color-on-dark: var(--dmps-color-white);

  --dmps-color-background: var(--dmps-color-white);
  --dmps-color-background-dark: var(--dmps-color-navy-950);
  --dmps-color-heading: var(--dmps-color-dolphin-dark);
  --dmps-color-body: var(--dmps-color-text);
  --dmps-color-muted: var(--dmps-color-text-muted);
  --dmps-color-link: var(--dmps-color-dolphin-dark);
  --dmps-color-link-hover: var(--dmps-color-dolphin-dark-strong);

  /* Accessibility notes:
     - #F69320 with white text: 2.30:1 (fails WCAG AA for normal text).
     - Use --dmps-color-on-accent (navy) on orange backgrounds.
     - Use --dmps-color-accent-text for orange-colored text on white.
     - Use --dmps-color-on-secondary (navy) on Dolphin light blue.
   */

  /* ==========================================================
     TYPOGRAPHY
     ========================================================== */
  --dmps-font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --dmps-font-display: "Source Sans 3", "Segoe UI", Arial, sans-serif;

  /* Semantic typography; apply in page CSS instead of imposing global margins. */
  --dmps-leading-body: 1.7;
  --dmps-leading-heading: 1.24;
  --dmps-weight-body: 400;
  --dmps-weight-heading: 700;
  --dmps-tracking-heading: -0.012em;

  /* Readability scale: optimized for Vietnamese clinical content. */
  --dmps-text-xs: 0.8125rem;
  --dmps-text-sm: 1rem;
  --dmps-text-base: 1.125rem;
  --dmps-text-lg: 1.25rem;
  --dmps-text-xl: 1.5rem;
  --dmps-text-2xl: clamp(1.5rem, 2vw, 2rem);
  --dmps-text-3xl: clamp(2rem, 4vw, 3.25rem);
  --dmps-text-display: clamp(2.5rem, 5vw, 4.875rem);

  /* ==========================================================
     SPACING
     ========================================================== */
  --dmps-space-1: 0.25rem;
  --dmps-space-2: 0.5rem;
  --dmps-space-3: 0.75rem;
  --dmps-space-4: 1rem;
  --dmps-space-5: 1.25rem;
  --dmps-space-6: 1.5rem;
  --dmps-space-8: 2rem;
  --dmps-space-10: 2.5rem;
  --dmps-space-12: 3rem;
  --dmps-space-16: 4rem;
  --dmps-space-20: 5rem;

  /* ==========================================================
     SHAPE / DEPTH
     ========================================================== */
  --dmps-radius-sm: 0.5rem;
  --dmps-radius-md: 0.75rem;
  --dmps-radius-lg: 1.25rem;
  --dmps-radius-pill: 999px;

  --dmps-shadow-sm: 0 6px 18px rgba(7, 22, 45, 0.08);
  --dmps-shadow-md: 0 16px 40px rgba(7, 22, 45, 0.14);
  --dmps-shadow-header: 0 8px 24px rgba(4, 16, 34, 0.2);

  /* ==========================================================
     LAYOUT / MOTION / LAYERS
     ========================================================== */
  --dmps-container: 1200px;
  --dmps-gutter: clamp(1rem, 4vw, 2rem);
  --dmps-header-height: 76px;

  --dmps-transition-fast: 160ms ease;
  --dmps-transition-base: 240ms ease;

  --dmps-z-header: 1000;
  --dmps-z-overlay: 1010;
  --dmps-z-drawer: 1020;
}

@media (max-width: 767px) {
  :root {
    --dmps-header-height: 66px;
  }
}