/* ==========================================================================
   SumIt Credits — brand tokens
   Version 1.0
   Drop this in as the first stylesheet loaded, before theme CSS.
   Every color, size, and timing value used anywhere on the site must
   reference a token from this file. No raw hex values in component CSS.
   ========================================================================== */

:root {

  /* ---- Core palette ---------------------------------------------------- */

  --sc-navy-900: #081A2C;   /* deepest — optional footer floor           */
  --sc-navy-800: #0B2239;   /* PRIMARY BRAND — super header, footer      */
  --sc-navy-700: #123A5E;   /* hero overlay, mid-tone bands              */
  --sc-navy-600: #1B4E7A;   /* links, interactive navy                   */
  --sc-navy-line: #1D3B57;  /* dividers on navy surfaces                 */
  --sc-navy-200: #D5E0EC;   /* borders on pale tint                      */
  --sc-navy-100: #EEF3F8;   /* pale tint sections, active nav pill       */

  --sc-gold-700: #8A6A1E;   /* ONLY gold that is legible on white        */
  --sc-gold-600: #C29433;   /* gold fill hover                           */
  --sc-gold-500: #D9A93E;   /* ACCENT — CTA fill, figures on navy        */
  --sc-gold-400: #EBBE5E;   /* gold on navy hover / lighter backgrounds  */
  --sc-gold-100: #F7EDD6;   /* gold tint — sparing, callout backgrounds  */
  --sc-gold-ink: #3A2A08;   /* the ONLY text color on a gold fill        */

  /* ---- Neutrals -------------------------------------------------------- */

  --sc-white:      #FFFFFF;
  --sc-surface:    #F7F9FB;  /* alternating section background           */
  --sc-border:     #E3E8EE;  /* hairlines on white                       */
  --sc-border-str: #C9D3DE;  /* input borders, emphasized dividers       */

  --sc-text:       #0B2239;  /* headings — same as navy-800              */
  --sc-text-body:  #3C4C5E;  /* paragraphs                               */
  --sc-text-muted: #5E7085;  /* captions, metadata (AA at 5.08:1)        */

  /* ---- On-navy text ---------------------------------------------------- */

  --sc-on-navy:       #FFFFFF;
  --sc-on-navy-body:  #C3D5E6;  /* body copy on navy-700                 */
  --sc-on-navy-muted: #9FB4C9;  /* footer body, utility bar text         */

  /* ---- Semantic -------------------------------------------------------- */

  --sc-success:  #12694A;
  --sc-danger:   #A32D2D;
  --sc-warning:  #8A6A1E;
  --sc-info:     #1B4E7A;
  --sc-bg-success: #E6F3EC;
  --sc-bg-danger:  #FBECEC;
  --sc-bg-warning: #F7EDD6;

  /* ---- Typography ------------------------------------------------------ */

  --sc-font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sc-font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sc-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --sc-size-display: clamp(2.5rem, 1.5rem + 3.2vw, 3.75rem);  /* 40→60px  */
  --sc-size-h1:      clamp(2.125rem, 1.5rem + 2.2vw, 3rem);   /* 34→48px  */
  --sc-size-h2:      clamp(1.75rem, 1.35rem + 1.4vw, 2.25rem);/* 28→36px  */
  --sc-size-h3:      1.5rem;    /* 24px */
  --sc-size-h4:      1.25rem;   /* 20px */
  --sc-size-lead:    1.125rem;  /* 18px */
  --sc-size-body:    1rem;      /* 16px */
  --sc-size-sm:      0.875rem;  /* 14px */
  --sc-size-xs:      0.8125rem; /* 13px — utility bar, legal */
  --sc-size-eyebrow: 0.75rem;   /* 12px */
  --sc-size-stat:    clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem);

  --sc-lh-tight: 1.1;
  --sc-lh-snug:  1.25;
  --sc-lh-base:  1.65;
  --sc-lh-loose: 1.75;

  --sc-track-display: -0.02em;
  --sc-track-eyebrow:  0.12em;

  --sc-w-regular: 400;
  --sc-w-medium:  500;
  --sc-w-semi:    600;

  /* ---- Spacing (4px base) ---------------------------------------------- */

  --sc-space-1:  0.25rem;
  --sc-space-2:  0.5rem;
  --sc-space-3:  0.75rem;
  --sc-space-4:  1rem;
  --sc-space-5:  1.5rem;
  --sc-space-6:  2rem;
  --sc-space-7:  3rem;
  --sc-space-8:  4rem;
  --sc-space-9:  6rem;
  --sc-space-10: 8rem;

  --sc-section-y: clamp(4rem, 8vw, 7rem);
  --sc-container: 1200px;
  --sc-gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ---- Shape ----------------------------------------------------------- */

  --sc-radius-sm: 2px;   /* buttons, inputs, badges */
  --sc-radius-md: 4px;   /* cards, images           */
  --sc-radius-lg: 8px;   /* modals, large panels    */
  --sc-radius-pill: 999px;

  --sc-hairline: 1px solid var(--sc-border);
  --sc-rule-accent: 3px solid var(--sc-gold-500);

  /* ---- Elevation ------------------------------------------------------- */

  --sc-shadow-sm: 0 1px 2px rgba(11, 34, 57, 0.06);
  --sc-shadow-md: 0 2px 4px rgba(11, 34, 57, 0.06),
                  0 8px 20px rgba(11, 34, 57, 0.07);
  --sc-shadow-header: 0 1px 0 rgba(11, 34, 57, 0.08),
                      0 4px 16px rgba(11, 34, 57, 0.06);

  /* ---- Motion ---------------------------------------------------------- */

  --sc-dur-fast: 150ms;
  --sc-dur-base: 250ms;
  --sc-dur-slow: 400ms;
  --sc-ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* ---- Focus ----------------------------------------------------------- */

  --sc-focus-ring: 0 0 0 2px var(--sc-white), 0 0 0 4px var(--sc-navy-600);
  --sc-focus-ring-on-navy: 0 0 0 2px var(--sc-navy-800), 0 0 0 4px var(--sc-gold-500);

  /* ---- Layer heights --------------------------------------------------- */

  --sc-h-utility: 40px;
  --sc-h-header: 84px;
  --sc-h-header-stuck: 68px;
  --sc-z-header: 100;
  --sc-z-dropdown: 110;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sc-dur-fast: 1ms;
    --sc-dur-base: 1ms;
    --sc-dur-slow: 1ms;
  }
}