/* =========================================================================
   ECI Design System — Color & Type Foundations
   Source: uploads/eci_brand_guidelines.md + ecisolutions.com
   ========================================================================= */

/* ---------- Fonts ----------
   PER BRAND STANDARDS:
   - Sofia Pro  = marketing & print (NOT licensed for software/app use)
   - Inter      = software / app UI (REQUIRED — Sofia Pro forbidden in-product)
   - Calibri    = websafe fallback for email + PowerPoint only
   Sofia Pro is licensed (Adobe Fonts / Fontspring). Fontshare hosts a close free
   alternative "Sofia Sans" for prototyping. Inter is free on Google Fonts.
   -------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Sofia+Sans:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap');

:root {
  /* ============================== COLOR: PRIMARY ============================== */
  /* Exact values from the ECI Brand Standards */
  --eci-white:           #FFFFFF;
  --eci-black:           #434143;   /* warm neutral ink — brand black */
  --eci-red:             #F5333F;   /* the accent. Use sparingly & with intent */
  --eci-red-dark:        #A71B28;   /* illustrations + small accents ONLY */
  --eci-gray-light:      #DDDDDD;
  --eci-gray:            #A1A1A1;
  --eci-gray-dark:       #686868;

  /* ============================== COLOR: SECONDARY SETS ============================== */
  /* Use ONE set at a time per composition. Never mix sets. */
  --eci-yellow-dark:     #D57602;
  --eci-yellow:          #F49F00;
  --eci-yellow-light:    #F9BB2C;

  --eci-green-dark:      #828E00;
  --eci-green:           #AEB500;
  --eci-green-light:     #CDCD2A;

  --eci-teal-dark:       #007468;
  --eci-teal:            #18A899;  /* per PDF brand standards */
  --eci-teal-light:      #3FC6A5;

  --eci-blue-dark:       #3F63B2;
  --eci-blue:            #5388E1;
  --eci-blue-light:      #5FA3F0;

  --eci-purple-dark:     #6F4692;
  --eci-purple:          #A065BE;
  --eci-purple-light:    #B587DE;

  /* ============================== SEMANTIC TOKENS ============================== */
  /* Surfaces */
  --surface:             var(--eci-white);
  --surface-muted:       #F7F7F7;       /* near-white canvas for page bg */
  --surface-raised:      var(--eci-white);
  --surface-sunken:      var(--eci-gray-light);
  --surface-inverse:     var(--eci-black);

  /* Foreground */
  --fg-1:                var(--eci-black);    /* primary ink */
  --fg-2:                var(--eci-gray-dark); /* secondary body */
  --fg-3:                var(--eci-gray);      /* tertiary / muted labels */
  --fg-disabled:         var(--eci-gray-light);
  --fg-on-accent:        var(--eci-white);
  --fg-on-dark:          var(--eci-white);

  /* Borders / dividers */
  --border-subtle:       #EDEDED;
  --border-default:      var(--eci-gray-light);
  --border-strong:       var(--eci-gray);
  --border-focus:        var(--eci-red);

  /* Accent (brand red) */
  --accent:              var(--eci-red);
  --accent-hover:        #D92E39;            /* ~8% darker; not all the way to Red Dark */
  --accent-pressed:      var(--eci-red-dark);
  --accent-soft-bg:      #FEE9EA;            /* red tinted background */

  /* Status — pulled from secondary sets */
  --status-success:      var(--eci-teal-dark);
  --status-success-bg:   #E4F6F1;
  --status-warning:      var(--eci-yellow-dark);
  --status-warning-bg:   #FDF1DC;
  --status-danger:       var(--eci-red);
  --status-danger-bg:    #FEE9EA;
  --status-info:         var(--eci-blue-dark);
  --status-info-bg:      #E8EEF8;

  /* Focus ring */
  --focus-ring:          0 0 0 3px rgba(245, 51, 63, 0.35);

  /* ============================== TYPE ============================== */
  /* Marketing + print — Sofia Pro (Sofia Sans as free stand-in) */
  --font-marketing:      Calibri, 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Software / app UI — Inter (mandated by brand standards for products) */
  --font-app:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Email / PowerPoint fallback */
  --font-websafe:        Calibri, 'Segoe UI', sans-serif;
  /* Default sans — pick based on surface. Defaulting to app font. */
  --font-sans:           var(--font-app);
  --font-display:        var(--font-marketing);
  --font-mono:           'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — modular ~1.25 */
  --fs-display-xl:       56px;
  --fs-display-lg:       44px;
  --fs-display:          36px;
  --fs-h1:               30px;
  --fs-h2:               24px;
  --fs-h3:               20px;
  --fs-h4:               18px;
  --fs-body-lg:          17px;
  --fs-body:             15px;
  --fs-body-sm:          13px;
  --fs-caption:          12px;
  --fs-micro:            11px;

  /* Line heights */
  --lh-tight:            1.1;
  --lh-snug:             1.25;
  --lh-normal:           1.5;
  --lh-loose:            1.65;

  /* Weights — ECI leans on 400 / 600 / 700 */
  --fw-regular:          400;
  --fw-medium:           600;
  --fw-bold:             700;
  --fw-black:            800;

  /* Letter spacing */
  --ls-tight:            -0.015em;
  --ls-normal:           0;
  --ls-wide:             0.04em;
  --ls-caps:             0.08em;

  /* ============================== SPACING ============================== */
  --space-0:             0;
  --space-1:             4px;
  --space-2:             8px;
  --space-3:             12px;
  --space-4:             16px;
  --space-5:             20px;
  --space-6:             24px;
  --space-8:             32px;
  --space-10:            40px;
  --space-12:            48px;
  --space-16:            64px;
  --space-20:            80px;
  --space-24:            96px;

  /* ============================== RADII ============================== */
  /* ECI runs moderate radii — not sharp, not pill-heavy */
  --radius-xs:           2px;
  --radius-sm:           4px;
  --radius-md:           6px;
  --radius-lg:           10px;
  --radius-xl:           16px;
  --radius-pill:         999px;

  /* ============================== ELEVATION ============================== */
  --shadow-xs:           0 1px 2px rgba(67, 65, 68, 0.06);
  --shadow-sm:           0 1px 3px rgba(67, 65, 68, 0.08), 0 1px 2px rgba(67, 65, 68, 0.04);
  --shadow-md:           0 4px 12px rgba(67, 65, 68, 0.08), 0 2px 4px rgba(67, 65, 68, 0.04);
  --shadow-lg:           0 12px 28px rgba(67, 65, 68, 0.12), 0 4px 8px rgba(67, 65, 68, 0.06);
  --shadow-xl:           0 24px 48px rgba(67, 65, 68, 0.16);
  --shadow-inset:        inset 0 1px 2px rgba(67, 65, 68, 0.08);

  /* ============================== MOTION ============================== */
  --ease-standard:       cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out:            cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:             cubic-bezier(0.4, 0.0, 1, 1);
  --dur-fast:            120ms;
  --dur-base:            200ms;
  --dur-slow:            320ms;

  /* ============================== LAYOUT ============================== */
  --container-max:       1200px;
  --container-wide:      1440px;
  --content-max:         680px;
}

/* =========================================================================
   SEMANTIC STYLES — drop-in element defaults
   ========================================================================= */

html { color: var(--fg-1); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-normal); }
body { margin: 0; background: var(--surface); color: var(--fg-1); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}
h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}
h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}

.display-xl { font-size: var(--fs-display-xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.display-lg { font-size: var(--fs-display-lg); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.display    { font-size: var(--fs-display);    font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }

p, .body { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--fg-1); margin: 0 0 var(--space-3); }
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--fg-1); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--fg-2); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--fg-2); }
.eyebrow {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--accent);
}

code, .code, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code { background: var(--surface-muted); padding: 0.12em 0.35em; border-radius: var(--radius-sm); color: var(--fg-1); }

a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 2px; }

hr { border: 0; border-top: 1px solid var(--border-default); margin: var(--space-8) 0; }

::selection { background: var(--accent); color: var(--fg-on-accent); }