/**
 * YEDF DESIGN SYSTEM TOKENS
 * Extracted directly from approved index.html
 */
:root {
  /* Corporate Palette */
  --brand-red: #de2b24;         /* Primary Corporate Identity */
  --brand-red-deep: #bf1e18;    /* Darkened hover / Active */
  --brand-red-light: #fdf1ef;   /* Tinted accent surface */
  --footer-bg: #de2b24;         /* Unified Corporate Red Footer */
  --accent-amber: #f2a93b;      /* Warm action buttons / badges */
  --accent-amber-hover: #e0972b;

  /* Neutral Tone Scale */
  --dark-ink: #18191b;          /* High-contrast headings */
  --dark-muted: #4e5359;        /* Body typography */
  --dark-bg: #1c1514;           /* Deep hero / dark panel canvas */
  --surface-light: #f7f8fa;     /* Neutral background canvas */
  --border-line: #e4e7ec;       /* Form borders & structural dividers */
  --white: #ffffff;             /* Crisp pure card surfaces */

  /* Social Platform Tokens */
  --social-fb-bg: #c7a17a;
  --social-fb-fg: #1a1a1a;
  --social-tw-bg: #ffffff;
  --social-tw-fg: #111111;
  --social-yt-bg: #2ecbf7;
  --social-yt-fg: #ffffff;
  --social-wa-bg: #e6148c;
  --social-wa-fg: #ffffff;

  /* Radii Scale */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Elevation & Shadows */
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 12px -2px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 16px 32px -6px rgba(222, 43, 36, 0.12);
  --shadow-card: 0 16px 36px rgba(0, 0, 0, 0.35);

  /* Typography Stacks */
  --font-head: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Motion & Easing */
  --transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Accessibility Modes (WCAG AAA 7:1 Contrast Compliance) */
html.font-normal {
  font-size: 100%;
}
html.font-large {
  font-size: 115%;
}
html.font-xlarge {
  font-size: 130%;
}

body.high-contrast,
body.hc {
  --dark-ink: #000000;
  --dark-muted: #111111;
  --surface-light: #ffffdd;
  --border-line: #000000;
  --brand-red: #000000;
  --brand-red-deep: #000000;
  --brand-red-light: #ffffaa;
  --footer-bg: #000000;
  background-color: #ffffff !important;
  color: #000000 !important;
}

body.high-contrast a,
body.hc a {
  text-decoration: underline !important;
  color: #0000ee !important;
}

body.high-contrast .btn,
body.high-contrast .header-dual-cta,
body.high-contrast .btn-red,
body.hc .btn,
body.hc .header-dual-cta,
body.hc .btn-red {
  background-color: #000000 !important;
  color: #ffff00 !important;
  border: 2px solid #ffff00 !important;
}

body.high-contrast .finder-card,
body.high-contrast .c-card,
body.high-contrast .loan-item-card,
body.high-contrast .post-card,
body.high-contrast .focus-card,
body.high-contrast .gallery-card,
body.high-contrast .story-card,
body.hc .finder-card,
body.hc .c-card,
body.hc .loan-item-card,
body.hc .post-card,
body.hc .focus-card,
body.hc .gallery-card,
body.hc .story-card {
  border: 2px solid #000000 !important;
  background: #ffffff !important;
  color: #000000 !important;
  box-shadow: none !important;
}

body.high-contrast :focus-visible,
body.hc :focus-visible {
  outline: 4px solid #ffff00 !important;
  outline-offset: 4px !important;
}