/**
 * Theme Base — CSS Custom Properties
 *
 * Single source of truth for all design tokens.
 * Every color, spacing value, font, and transition in the theme
 * derives from these variables. Never hardcode values anywhere else.
 *
 * Design System: "Institutional Rigor" (Stitch / DESIGN.md)
 * Brand: Ethical Infrastructure Institute
 *
 * @package EthicalInfrastructure
 */

:root {

  /* ─────────────────────────────────────────────────────────────────────────
     PRIMARY PALETTE — Institutional Navy
     ───────────────────────────────────────────────────────────────────────── */
  --color-primary:                  #0a1b3a;
  --color-on-primary:               #FAF9F7;
  --color-primary-container:        #0a1b3a;
  --color-on-primary-container:     #7583a8;
  --color-primary-fixed:            #d9e2ff;
  --color-primary-fixed-dim:        #b7c6ee;
  --color-on-primary-fixed:         #0a1b3a;
  --color-on-primary-fixed-variant: #384667;
  --color-inverse-primary:          #b7c6ee;

  /* ─────────────────────────────────────────────────────────────────────────
     SURFACE SCALE — Warm Ivory to Cool Neutral
     ───────────────────────────────────────────────────────────────────────── */
  --color-background:                  #FAF9F7;
  --color-surface:                     #FAF9F7;
  --color-surface-bright:              #FAF9F7;
  --color-surface-container-lowest:    #FAF9F7;
  --color-surface-container-low:       #F8FAFC;
  --color-surface-container:           #F5F4F1;
  --color-surface-container-high:      #F0EFEA;
  --color-surface-container-highest:   #E5E9F0;
  --color-surface-dim:                 #E5E9F0;
  --color-inverse-surface:             #0a1b3a;
  --color-inverse-on-surface:          #FAF9F7;

  /* ─────────────────────────────────────────────────────────────────────────
     TEXT COLORS
     ───────────────────────────────────────────────────────────────────────── */
  --color-on-surface:          #0a1b3a;
  --color-on-surface-variant:  #4A5568;
  --color-on-background:       #0a1b3a;

  /* ─────────────────────────────────────────────────────────────────────────
     SECONDARY PALETTE — Slate Gray
     ───────────────────────────────────────────────────────────────────────── */
  --color-secondary:                  #4A5568;
  --color-on-secondary:               #FAF9F7;
  --color-secondary-container:        #F5F4F1;
  --color-on-secondary-container:     #4A5568;
  --color-secondary-fixed:            #E5E9F0;
  --color-secondary-fixed-dim:        #CBD5E1;
  --color-on-secondary-fixed:         #0a1b3a;
  --color-on-secondary-fixed-variant: #4A5568;

  /* ─────────────────────────────────────────────────────────────────────────
     TERTIARY — Matches primary in this system (institutional monochrome)
     ───────────────────────────────────────────────────────────────────────── */
  --color-tertiary:                  #0a1b3a;
  --color-on-tertiary:               #FAF9F7;
  --color-tertiary-container:        #0a1b3a;
  --color-on-tertiary-container:     #7d839c;
  --color-tertiary-fixed:            #dce1fd;
  --color-tertiary-fixed-dim:        #c0c5e1;
  --color-on-tertiary-fixed:         #0a1b3a;
  --color-on-tertiary-fixed-variant: #40465c;

  /* ─────────────────────────────────────────────────────────────────────────
     BORDER / OUTLINE
     ───────────────────────────────────────────────────────────────────────── */
  --color-outline:         #E5E9F0;
  --color-outline-variant: #CBD5E1;
  --color-surface-variant: #E5E9F0;
  --color-surface-tint:    #0a1b3a;

  /* Brand-specific transparency token */
  --color-institutional-blue-faded: rgba(10, 27, 58, 0.10);

  /* ─────────────────────────────────────────────────────────────────────────
     ERROR
     ───────────────────────────────────────────────────────────────────────── */
  --color-error:              #BA1A1A;
  --color-on-error:           #FAF9F7;
  --color-error-container:    #FFDAD6;
  --color-on-error-container: #93000A;

  /* ─────────────────────────────────────────────────────────────────────────
     TYPOGRAPHY — Font Families
     ───────────────────────────────────────────────────────────────────────── */
  --font-display:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:     'Courier New', Courier, monospace;

  /* ─────────────────────────────────────────────────────────────────────────
     TYPOGRAPHY — Font Sizes
     ───────────────────────────────────────────────────────────────────────── */
  --fs-display-lg:   64px;
  --fs-headline-xl:  48px;
  --fs-headline-lg:  32px;
  --fs-headline-md:  24px;
  --fs-body-lg:      18px;
  --fs-body-md:      16px;
  --fs-label-caps:   12px;
  --fs-label-tiny:   10px;

  /* ─────────────────────────────────────────────────────────────────────────
     TYPOGRAPHY — Font Weights
     ───────────────────────────────────────────────────────────────────────── */
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;

  /* ─────────────────────────────────────────────────────────────────────────
     TYPOGRAPHY — Line Heights
     ───────────────────────────────────────────────────────────────────────── */
  --lh-display:   1.1;
  --lh-headline:  1.2;
  --lh-headline-lg: 1.3;
  --lh-headline-md: 1.4;
  --lh-body:      1.6;
  --lh-label:     1.0;

  /* ─────────────────────────────────────────────────────────────────────────
     TYPOGRAPHY — Letter Spacing
     ───────────────────────────────────────────────────────────────────────── */
  --ls-display:       -0.02em;
  --ls-tight:         -0.01em;
  --ls-normal:         0;
  --ls-label:          0.10em;
  --ls-label-wide:     0.20em;
  --ls-label-wider:    0.30em;
  --ls-label-tiny:     0.15em;

  /* ─────────────────────────────────────────────────────────────────────────
     SPACING — All values are multiples of the 8px unit
     ───────────────────────────────────────────────────────────────────────── */
  --space-unit:    8px;

  --space-1:    8px;    /*  1 unit  */
  --space-2:   16px;    /*  2 units */
  --space-3:   24px;    /*  3 units */
  --space-4:   32px;    /*  4 units = --space-gutter */
  --space-5:   40px;    /*  5 units */
  --space-6:   48px;    /*  6 units */
  --space-8:   64px;    /*  8 units = --space-margin-desktop */
  --space-10:  80px;    /* 10 units */
  --space-12:  96px;    /* 12 units */
  --space-15: 120px;    /* 15 units = --space-section-gap */
  --space-18: 144px;    /* 18 units */
  --space-20: 160px;    /* 20 units */

  /* Named spacing — used in layout and component CSS */
  --space-gutter:          32px;
  --space-section-gap:     60px;
  --space-margin-desktop:  64px;
  --space-margin-mobile:   20px;
  --space-card-padding:    40px;

  /* ─────────────────────────────────────────────────────────────────────────
     LAYOUT
     ───────────────────────────────────────────────────────────────────────── */
  --container-max:     1280px;
  --container-padding: var(--space-margin-desktop);

  /* ─────────────────────────────────────────────────────────────────────────
     BORDERS & RADIUS
     Institutional Minimalism: 0px everywhere except decorative dots
     ───────────────────────────────────────────────────────────────────────── */
  --radius:        0px;
  --radius-sm:     0px;
  --radius-md:     0px;
  --radius-lg:     0px;
  --radius-xl:     0px;
  --radius-full:   9999px; /* Decorative dots ONLY */
  --border-width:  1px;
  --border-style:  solid;
  --border-color:  var(--color-outline);

  /* ─────────────────────────────────────────────────────────────────────────
     TRANSITIONS
     ───────────────────────────────────────────────────────────────────────── */
  --transition-fast:     all 0.15s ease;
  --transition-medium:   all 0.3s ease;
  --transition-slow:     all 0.5s ease;
  --transition-colors:   color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
  --transition-soft:     all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-border:   border-color 0.5s ease;
  --transition-reveal:   opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  --transition-image:    filter 0.7s ease, transform 0.7s ease;

  /* ─────────────────────────────────────────────────────────────────────────
     SHADOWS
     This system avoids traditional shadows — uses tonal layering instead.
     Only one subtle shadow is defined, for dropdown menus.
     ───────────────────────────────────────────────────────────────────────── */
  --shadow-dropdown: 0 4px 16px rgba(10, 27, 58, 0.08);
  --shadow-card:     none;

  /* ─────────────────────────────────────────────────────────────────────────
     Z-INDEX SCALE
     ───────────────────────────────────────────────────────────────────────── */
  --z-below:      -1;
  --z-base:        0;
  --z-raised:     10;
  --z-dropdown:   50;
  --z-sticky:    100;
  --z-overlay:   200;
  --z-modal:     300;
  --z-toast:     400;

  /* ─────────────────────────────────────────────────────────────────────────
     MATERIAL SYMBOLS — icon font variation settings
     ───────────────────────────────────────────────────────────────────────── */
  --icon-fill:   0;
  --icon-weight: 300;
  --icon-grade:  0;
  --icon-size:   24;

  /* ─────────────────────────────────────────────────────────────────────────
     HERO GRADIENT
     ───────────────────────────────────────────────────────────────────────── */
  --gradient-hero: linear-gradient(180deg, rgba(250, 249, 247, 0) 0%, rgba(250, 249, 247, 1) 100%);
  --gradient-navy-overlay: linear-gradient(180deg, rgba(10, 27, 58, 0) 0%, rgba(10, 27, 58, 0.8) 100%);
}

/* ─────────────────────────────────────────────────────────────────────────────
   BASE RESETS & GLOBAL DEFAULTS
   ───────────────────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 16px;
}

body {
  background-color: var(--color-background);
  color: var(--color-on-surface);
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Selection color */
::selection {
  background-color: var(--color-primary-fixed);
  color: var(--color-primary);
}

/* Focus visible — accessible, minimal */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Remove focus ring for mouse users — only show for keyboard */
:focus:not(:focus-visible) {
  outline: none;
}

/* Skip to content link */
.ei-skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-label-caps);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  z-index: var(--z-modal);
  transition: top 0.2s ease;
}
.ei-skip-link:focus {
  top: var(--space-2);
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
}

ul,
ol {
  list-style: none;
}

/* Material Symbols — variable font settings */
.material-symbols-outlined {
  font-variation-settings:
    'FILL' var(--icon-fill),
    'wght' var(--icon-weight),
    'GRAD' var(--icon-grade),
    'opsz' var(--icon-size);
  vertical-align: middle;
  user-select: none;
}

/* Screen reader only utility */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: var(--color-background);
  clip: auto !important;
  clip-path: none;
  color: var(--color-on-surface);
  display: block;
  font-size: var(--fs-body-md);
  font-weight: var(--fw-bold);
  height: auto;
  left: var(--space-2);
  line-height: normal;
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  top: var(--space-2);
  width: auto;
  z-index: var(--z-modal);
}

/* WordPress alignment classes */
.alignleft  { float: left; margin-right: var(--space-4); }
.alignright { float: right; margin-left: var(--space-4); }
.aligncenter { display: block; margin: 0 auto; }
.alignwide  { max-width: 100%; }
.alignfull  { width: 100vw; margin-left: calc(50% - 50vw); }