/* DCA Design Tokens — color, type, spacing, effects, base reset */


/* ============================================================
   DCA COLOR SYSTEM
   Premium Navy Blue & Gold — executive education brand.
   Base palette + semantic aliases.
   ============================================================ */
:root {
  /* ---- Navy (primary) ---- */
  --navy-900: #081A31;   /* Dark Navy   — deepest backgrounds, footer */
  --navy-800: #0A2342;   /* Primary Navy — header, hero, brand anchor */
  --navy-700: #123A66;   /* Light Navy  — raised navy surfaces */
  --navy-600: #163D68;   /* Surface Navy — cards on navy, hover */
  --navy-500: #1F4E84;   /* interactive navy / focus on dark */
  --navy-400: #3A6BA5;   /* muted navy text on light */

  /* ---- Gold (accent) ---- */
  --gold-700: #B88A14;   /* Hover Gold  — pressed / hover accent */
  --gold-600: #C9A227;   /* Rich Gold   — solid accent surfaces */
  --gold-500: #D4AF37;   /* Primary Gold — buttons, links, highlights */
  --gold-300: #E5C76B;   /* Light Gold  — soft fills, borders */
  --gold-100: #F7EFD3;   /* faint gold tint — badges, hover wash */

  /* ---- Neutrals ---- */
  --white:     #FFFFFF;
  --bg:        #F8F9FB;  /* page background */
  --gray-100:  #F3F4F6;
  --gray-200:  #E5E7EB;
  --gray-300:  #D1D5DB;
  --gray-400:  #9CA3AF;
  --gray-500:  #6B7280;
  --gray-600:  #4B5563;
  --gray-700:  #374151;
  --gray-900:  #111827;  /* primary text */

  /* ---- Semantic status ---- */
  --success:   #1E7F4F;
  --success-bg:#E6F4EC;
  --warning:   #B7791F;
  --warning-bg:#FBF3E0;
  --danger:    #C2362F;
  --danger-bg: #FBEAE8;
  --info:      #1F4E84;
  --info-bg:   #E8EFF7;

  /* ===========================================================
     SEMANTIC ALIASES — reference these in components.
     =========================================================== */
  /* Brand */
  --color-brand:           var(--navy-800);
  --color-brand-dark:      var(--navy-900);
  --color-accent:          var(--gold-500);
  --color-accent-strong:   var(--gold-600);
  --color-accent-hover:    var(--gold-700);

  /* Surfaces */
  --surface-page:          var(--bg);
  --surface-card:          var(--white);
  --surface-sunken:        var(--gray-100);
  --surface-navy:          var(--navy-800);
  --surface-navy-raised:   var(--navy-600);

  /* Text */
  --text-strong:           var(--gray-900);
  --text-body:             var(--gray-700);
  --text-muted:            var(--gray-500);
  --text-on-navy:          var(--white);
  --text-on-navy-muted:    rgba(255,255,255,0.72);
  --text-on-gold:          var(--navy-800);
  --text-link:             var(--gold-700);

  /* Borders */
  --border-subtle:         var(--gray-200);
  --border-default:        var(--gray-300);
  --border-strong:         var(--gray-400);
  --border-accent:         var(--gold-500);
  --border-on-navy:        rgba(255,255,255,0.16);

  /* Focus ring (WCAG visible focus) */
  --focus-ring:            var(--gold-500);
  --focus-ring-navy:       var(--navy-800);

  /* Hero / image overlay (BRD: rgba(10,35,66,0.75)) */
  --overlay-navy:          rgba(10,35,66,0.75);
  --overlay-navy-soft:     rgba(10,35,66,0.55);

  /* Glass (glassmorphism — used sparingly on navy/imagery) */
  --glass-bg:              rgba(255,255,255,0.08);
  --glass-border:          rgba(255,255,255,0.18);
  --glass-blur:            16px;
}

/* ============================================================
   DCA TYPOGRAPHY SYSTEM
   Display: Playfair Display (serif) — headlines, certification titles.
   Body:    Inter (sans) — UI, paragraphs, forms, tables.
   ============================================================ */
:root {
  /* Families */
  --font-display: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-mono:    'SFMono-Regular', ui-monospace, 'Menlo', monospace;

  /* Weights */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */
  --fw-black:     900; /* @kind font */

  /* Type scale (BRD spec) */
  --fs-h1:        56px;
  --fs-h2:        44px;
  --fs-h3:        32px;
  --fs-h4:        24px;
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-sm:        14px;
  --fs-caption:   12px;

  /* Line heights */
  --lh-tight:     1.1;   /* @kind font */
  --lh-snug:      1.25;  /* @kind font */
  --lh-normal:    1.5;   /* @kind font */
  --lh-relaxed:   1.65;  /* @kind font */

  /* Letter spacing */
  --ls-tight:    -0.02em;  /* @kind font */
  --ls-normal:    0;       /* @kind font */
  --ls-wide:      0.04em;  /* @kind font */
  --ls-caps:      0.12em;  /* @kind font */
}

/* ---- Optional ready-made text classes (semantic, token-driven) ---- */
.dca-display-1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--text-strong); }
.dca-display-2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--text-strong); }
.dca-heading-3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--text-strong); }
.dca-heading-4 { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-h4); line-height: var(--lh-snug); color: var(--text-strong); }
.dca-body-lg   { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--text-body); }
.dca-body      { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--text-body); }
.dca-small     { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-muted); }
.dca-caption   { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--text-muted); }
.dca-eyebrow   { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-caption); line-height: 1; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-accent-hover); }

/* ============================================================
   DCA SPACING & LAYOUT SYSTEM
   Base unit: 8px. Scale per BRD.
   ============================================================ */
:root {
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   16px;
  --space-4:   24px;
  --space-5:   32px;
  --space-6:   48px;
  --space-7:   64px;
  --space-8:   80px;
  --space-9:   120px;
  --space-10:  160px;

  /* Layout containers */
  --container-max:   1440px;  /* desktop container */
  --container-text:  720px;   /* readable measure for long-form */
  --gutter:          24px;    /* 12-col grid gutter */
  --grid-columns:    12;      /* @kind other */

  /* Section rhythm */
  --section-y:       var(--space-9);  /* vertical padding for page sections */
  --section-y-sm:    var(--space-7);

  /* Breakpoints (reference values) */
  --bp-mobile:   375px;  /* @kind other */
  --bp-tablet:   768px;  /* @kind other */
  --bp-laptop:   1024px; /* @kind other */
  --bp-desktop:  1440px; /* @kind other */
  --bp-wide:     1920px; /* @kind other */
}

/* ============================================================
   DCA EFFECTS — radius, elevation (shadows), transitions, z-index.
   ============================================================ */
:root {
  /* ---- Border radius ---- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;   /* default card / input */
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---- Elevation / shadow ----
     Soft, cool-navy-tinted shadows for a premium, calm feel. */
  --shadow-xs:  0 1px 2px rgba(10,35,66,0.06);
  --shadow-sm:  0 1px 3px rgba(10,35,66,0.08), 0 1px 2px rgba(10,35,66,0.06);
  --shadow-md:  0 4px 12px rgba(10,35,66,0.08), 0 2px 4px rgba(10,35,66,0.06);
  --shadow-lg:  0 12px 28px rgba(10,35,66,0.12), 0 4px 8px rgba(10,35,66,0.06);
  --shadow-xl:  0 24px 56px rgba(10,35,66,0.18), 0 8px 16px rgba(10,35,66,0.08);
  /* Gold-accent glow for focused / featured elements */
  --shadow-gold: 0 8px 24px rgba(212,175,55,0.28);
  /* Inset for sunken inputs */
  --shadow-inset: inset 0 1px 2px rgba(10,35,66,0.06);

  /* ---- Transitions (BRD: 200–300ms; fade / slide / scale) ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --dur-fast:      150ms; /* @kind other */
  --dur-base:      220ms; /* @kind other */
  --dur-slow:      300ms; /* @kind other */
  --transition-base: all var(--dur-base) var(--ease-standard); /* @kind other */

  /* ---- Z-index layers ---- */
  --z-base:      0;     /* @kind other */
  --z-raised:    10;    /* @kind other */
  --z-sticky:    100;   /* @kind other */
  --z-dropdown:  200;   /* @kind other */
  --z-overlay:   900;   /* @kind other */
  --z-modal:     1000;  /* @kind other */
  --z-toast:     1100;  /* @kind other */
  --z-tooltip:   1200;  /* @kind other */
}

/* ============================================================
   DCA BASE RESET & GLOBAL ELEMENT DEFAULTS
   Lightweight, accessibility-first. Sets brand defaults on the
   document so cards/specimens render in-brand by default.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--text-strong); }
h1, h2, h3 { font-family: var(--font-display); }
p { margin: 0; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { display: block; max-width: 100%; }

button { font-family: inherit; }

/* Visible, brand-consistent focus for keyboard users (WCAG 2.1 AA) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

*, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; background: var(--surface-page); }
    @keyframes dca-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    @keyframes dca-mega-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    @keyframes dca-drawer-in { from { transform: translateX(100%); } to { transform: none; } }
    .dca-mega { animation: dca-mega-in 200ms cubic-bezier(0.16,1,0.3,1); }
    @media (max-width: 1024px) { .dca-hero-grid { grid-template-columns: 1fr !important; } .dca-hero-media { display: none !important; } }
    @media (max-width: 1000px) { .dca-nav-desktop { display: none !important; } .dca-nav-burger { display: inline-flex !important; } }
    @media (max-width: 820px) { .dca-split { grid-template-columns: 1fr !important; } .dca-split-media { order: -1; } .dca-section { padding-top: 64px !important; padding-bottom: 64px !important; } .dca-h2 { font-size: 32px !important; } .dca-h1 { font-size: 40px !important; } }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }