/* ============================================================
   Equity in AI — Design Tokens
   Import this file to use brand colors, type, spacing, shadows.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Merriweather:wght@300;400;700&display=swap');

:root {
  /* ------------------------------------------------------------
     CORE PALETTE (canonical — six roles)
     Primary    Deep Teal       #2A6F97
     Secondary  Warm Apricot    #F4A261
     Accent     Soft Coral      #E76F51
     Background Soft Light Gray #F9FAFB
     Text 1     Charcoal        #1F2937
     Text 2     Slate Gray      #4B5563
     ------------------------------------------------------------ */
  --color-primary:    #2A6F97;     /* Deep Teal — headings, CTAs, borders */
  --color-secondary:  #F4A261;     /* Warm Apricot — borders, action buttons */
  --color-accent:     #E76F51;     /* Soft Coral — badges, hover, emphasis */
  --color-bg:         #F9FAFB;     /* Soft Light Gray — page / section bg */
  --color-text-1:     #1F2937;     /* Charcoal — primary text + headings */
  --color-text-2:     #4B5563;     /* Slate Gray — secondary text */

  /* COLOR — Primary aliases (legacy / extended) */
  --color-primary-blue: #2A6F97;   /* alias of --color-primary */
  --color-accent-blue:  #3b82f6;   /* extended: links, acronyms, hot link */
  --color-dark-blue:    #1e5a7e;   /* extended: primary-button hover */

  /* COLOR — Accent / Action aliases */
  --color-coral-orange: #E76F51;   /* alias of --color-accent */
  --color-warm-orange:  #F4A261;   /* alias of --color-secondary */
  --color-orange:       #f97316;   /* extended: gradient hot-stop */

  /* COLOR — Neutrals / Text aliases */
  --color-near-black:  #1a1a1a;    /* extended: hero H1 only */
  --color-dark-gray:   #1F2937;    /* alias of --color-text-1 */
  --color-medium-gray: #4B5563;    /* alias of --color-text-2 */
  --color-muted-gray:  #64748b;    /* extended: taglines, subtitles */

  /* COLOR — Backgrounds */
  --color-white:     #ffffff;      /* main bg */
  --color-light-gray:#F9FAFB;      /* alias of --color-bg */
  --color-off-white: #fafafa;      /* sponsors strip */

  /* ------------------------------------------------------------
     SEMANTIC COLOR — use these in components
     ------------------------------------------------------------ */
  --fg-1:        var(--color-text-1);      /* Charcoal — body + most headings */
  --fg-2:        var(--color-text-2);      /* Slate Gray — secondary text */
  --fg-3:        var(--color-muted-gray);  /* Muted — taglines, subtitles */
  --fg-display:  var(--color-near-black);  /* Near-black — hero H1 only */
  --fg-muted:    var(--color-muted-gray);  /* alias */
  --fg-link:     var(--color-accent-blue);
  --fg-heading:  var(--color-primary);     /* Deep Teal */

  --bg-page:     var(--color-white);
  --bg-section:  var(--color-bg);          /* Soft Light Gray */
  --bg-strip:    var(--color-off-white);

  --accent:        var(--color-accent);    /* Soft Coral */
  --accent-soft:   var(--color-secondary); /* Warm Apricot */
  --accent-hot:    var(--color-orange);

  --border-card:    var(--color-warm-orange);
  --border-image:   var(--color-warm-orange);
  --border-rule:    var(--color-primary-blue);   /* memorial 3px top/bottom */

  /* ------------------------------------------------------------
     GRADIENTS
     ------------------------------------------------------------ */
  --gradient-underline: linear-gradient(90deg, #f97316, #3b82f6);
  --gradient-cta:       linear-gradient(135deg, #2A6F97 0%, #1e5a7e 100%);
  --gradient-page:      linear-gradient(to bottom, #ffffff, #f0f7ff);

  /* ------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------ */
  --font-display: 'Merriweather', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale (matches site spec) */
  --fs-h1:       3.75rem;   /* 60px */
  --fs-h2:       2.5rem;    /* 40px */
  --fs-h3:       2rem;      /* 32px */
  --fs-h3-min:   1.5rem;    /* 24px — for tighter contexts */
  --fs-tagline:  1.7rem;    /* 27.2px */
  --fs-body-lg:  1.1rem;    /* 17.6px */
  --fs-body:     1rem;      /* 16px */
  --fs-small:    0.875rem;  /* 14px */
  --fs-caption:  0.75rem;   /* 12px */
  --fs-badge:    0.75rem;   /* 12px */

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  /* ------------------------------------------------------------
     SPACING
     ------------------------------------------------------------ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ------------------------------------------------------------
     RADIUS
     ------------------------------------------------------------ */
  --radius-button: 6px;
  --radius-image:  8px;
  --radius-card:   12px;
  --radius-pill:   16px;
  --radius-full:   9999px;

  /* ------------------------------------------------------------
     SHADOW / ELEVATION
     ------------------------------------------------------------ */
  --shadow-card:        0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-card-hover:  0 8px 28px rgba(0, 0, 0, 0.12);
  --shadow-strong:      0 12px 40px rgba(0, 0, 0, 0.15);

  /* ------------------------------------------------------------
     BORDERS — branded rules
     ------------------------------------------------------------ */
  --border-card-w:    0;              /* cards rely on shadow, not a border */
  --border-image-w:   3px;            /* image frame 3px solid warm-orange */
  --border-memorial:  3px solid var(--border-rule);

  /* ------------------------------------------------------------
     TRANSITION
     ------------------------------------------------------------ */
  --t-fast:   150ms ease-out;
  --t-base:   200ms ease-out;
  --t-slow:   250ms ease-in-out;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply via class .ds-prose or by targeting tags directly.
   ============================================================ */
.ds-prose {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.ds-h1, .ds-prose h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-5);
}

.ds-h2, .ds-prose h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--fg-heading);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-4);
}

.ds-h3, .ds-prose h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--fg-heading);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-3);
}

.ds-tagline {
  font-family: var(--font-body);
  font-size: var(--fs-tagline);
  font-weight: var(--fw-regular);
  color: var(--fg-muted);
  line-height: var(--lh-snug);
}

.ds-body, .ds-prose p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--fg-2);
  line-height: var(--lh-loose);
  margin: 0 0 var(--space-4);
}

.ds-small { font-size: var(--fs-small); color: var(--fg-3); }
.ds-caption { font-size: var(--fs-caption); color: var(--fg-3); }

.ds-acronym {
  color: var(--fg-link);
  font-weight: var(--fw-semibold);
}

/* Section badge — coral pill */
.ds-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-badge);
  font-weight: var(--fw-semibold);
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--color-white);
  background: var(--color-coral-orange);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
}

/* Buttons */
.ds-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  color: var(--color-white);
  background: var(--color-primary-blue);
  border: none;
  border-radius: var(--radius-button);
  padding: 12px 24px;
  cursor: pointer;
  transition: background var(--t-base);
}
.ds-btn-primary:hover { background: var(--color-dark-blue); }
.ds-btn-primary:active { transform: translateY(1px); }

.ds-btn-action {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  color: var(--color-white);
  background: var(--color-warm-orange);
  border: none;
  border-radius: var(--radius-button);
  padding: 12px 24px;
  cursor: pointer;
  transition: background var(--t-base);
}
.ds-btn-action:hover { background: var(--color-coral-orange); }
.ds-btn-action:active { transform: translateY(1px); }

/* Card */
.ds-card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  transition: box-shadow var(--t-base);
}
.ds-card:hover {
  box-shadow: var(--shadow-card-hover);
}

/* Image frame */
.ds-image-frame {
  border: var(--border-image-w) solid var(--border-image);
  border-radius: var(--radius-image);
  overflow: hidden;
  display: block;
}

/* Memorial / highlight rule (top + bottom) */
.ds-memorial {
  border-top: var(--border-memorial);
  border-bottom: var(--border-memorial);
  padding: var(--space-7) 0;
}

/* Underline accent */
.ds-underline-accent {
  display: inline-block;
  background-image: var(--gradient-underline);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: 0 100%;
  padding-bottom: 6px;
}