/* ==========================================================================
   UTESA Indico branding — 00-tokens.css
   Design tokens, self-hosted @font-face, and base typography.
   Loaded first (alphabetical) so later files can consume these vars.
   ========================================================================== */

:root {
  /* --- Brand colors -------------------------------------------------- */
  --utesa-green:        #076633;  /* primary — sampled from official seal */
  --utesa-green-dark:   #054d26;  /* hover / gradient end */
  --utesa-green-light:  #e8f2ec;  /* tinted surfaces */
  --utesa-gold:         #E7B00E;  /* accent — sampled from official seal. ACCENT ONLY, never as text/background contrast pair with white */
  --utesa-ink:          #1c2b22;
  --utesa-muted:        #5d6b63;
  --utesa-surface:      #ffffff;
  --utesa-bg:           #f6f8f7;
  --utesa-border:       #dfe6e2;

  /* --- Derived / state colors ----------------------------------------- */
  --utesa-green-rgb:    7, 102, 51;
  --utesa-focus-ring:   rgba(7, 102, 51, 0.45);
  --utesa-gold-tint:    #fbf1d6;   /* gold at low opacity on white, safe as a surface, not as text */
  --utesa-danger:       #b3261e;

  /* --- Spacing scale ---------------------------------------------------- */
  --utesa-space-xs:  0.25rem;
  --utesa-space-sm:  0.5rem;
  --utesa-space-md:  1rem;
  --utesa-space-lg:  1.5rem;
  --utesa-space-xl:  2.5rem;

  /* --- Radius / shadow --------------------------------------------------- */
  --utesa-radius-sm: 6px;
  --utesa-radius-md: 10px;
  --utesa-radius-lg: 16px;
  --utesa-shadow-sm: 0 1px 2px rgba(28, 43, 34, 0.06), 0 1px 1px rgba(28, 43, 34, 0.04);
  --utesa-shadow-md: 0 4px 12px rgba(28, 43, 34, 0.08), 0 1px 3px rgba(28, 43, 34, 0.06);
  --utesa-shadow-lg: 0 12px 32px rgba(28, 43, 34, 0.12), 0 2px 6px rgba(28, 43, 34, 0.06);

  /* --- Typography --------------------------------------------------- */
  --utesa-font-heading: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --utesa-font-body:    'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Fluid type scale (docs/DESIGN.md §2) ---------------------------
     Shared with the event-page theme (plugin/) so both surfaces read as
     one scale. Do not rename or shrink these — they're the biggest single
     driver of the "modern conference site" feel called for in the design
     doc, and the event theme keys off the same names. */
  --fs-display: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  --fs-h1:      clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --fs-h2:      clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
  --fs-h3:      1.25rem;
  --fs-lead:    clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --fs-body:    1.0625rem;
  --fs-eyebrow: 0.8125rem;

  /* --- Shared layout tokens (docs/DESIGN.md §3) ------------------------ */
  --container:        1180px;
  --container-prose:  72ch;
  --gutter:            clamp(1.25rem, 1rem + 1vw, 2rem);
  --band-pad:          clamp(3rem, 2rem + 4vw, 6rem);
  --radius:            12px;
  --radius-sm:         8px;
  --shadow: 0 1px 2px rgba(var(--utesa-green-rgb), .06), 0 8px 24px -12px rgba(var(--utesa-green-rgb), .18);
}

/* ==========================================================================
   Indico 3.3's own design-token remap.

   Indico 3.3 themes almost everything (link color, hover/active link color,
   "highlight"/alt-style button surfaces, tags, menu accents) off a set of
   CSS custom properties declared on `body{...}` in main.<hash>.css — e.g.
   `--accent-color: #0075a3` feeds `--clickable-text-color` which feeds
   `--link-color`, which is what plain links and .event-list li .list-name a
   (the event title links on the home page) actually render with.

   Overriding those declarations with a selector of the same specificity
   (the element selector `body`) loaded after Indico's stylesheet is the
   correct way to recolor every one of those consumers at once, rather than
   chasing each hardcoded-blue selector individually. This is what fixes
   Indico's default blue (#0075a3 / #09c / #007cac / #0b63a5 depending on
   the component) to UTESA green across home, categories, dashboard, and
   login — anywhere Indico used its own variable, not a hardcoded color.

   Only the *accent/brand* variables are remapped. State colors that are
   semantically meaningful — --active-color (red, :active state),
   --visited-color (purple), --protected-color, --attention-color, and the
   --text-red/green/blue/brown/orange-color palette used for labelling —
   are left untouched on purpose. */
body {
  --accent-color: var(--utesa-green);              /* was #0075a3 — drives --clickable-text-color / --link-color, --tag-generic-color, --control-alt-clickable-surface-color */
  --accent-highlight-color: var(--utesa-green-dark); /* was #035e81 — link hover state, .header text color, --control-alt-clickable-surface-focus-color */
  --accent-secondary-color: var(--utesa-green-dark); /* was #aa5302 — feeds --clickable-text-highlight-color / --link-highlight-color (link :hover/:focus text) */
  --accent-border-color: var(--utesa-green-dark);   /* was #05425b — --control-alt-border-color */
}

/* ==========================================================================
   Conference/event page chrome (.confheader/.confTitleBox/.menuConfTitle/
   .support_box etc.) reads a SEPARATE --conf-theme-* variable family,
   declared by Indico on :root, not the --accent-* family above. Without
   this block an event's title banner stays Indico's stock blue even though
   the rest of the site is green. Same technique, same specificity
   (:root, loaded after Indico's stylesheet wins on source order), and the
   same values as the optional conference theme plugin in plugin/ — kept in
   sync so enabling that plugin later doesn't change this banner's color. */
:root {
  --conf-theme-header-bg: var(--utesa-green);
  --conf-theme-header-border-bottom: var(--utesa-green-dark);
  --conf-theme-header-text: #ffffff;

  --conf-theme-subtitle-bg: var(--utesa-border);
  --conf-theme-subtitle-border: var(--utesa-border);
  --conf-theme-subtitle-text: var(--utesa-green);

  --conf-theme-menu-bg: var(--utesa-surface);
  --conf-theme-menu-border: var(--utesa-border);
  --conf-theme-menu-link: var(--utesa-ink);
  --conf-theme-menu-selected: var(--utesa-green-dark);
  --conf-theme-menu-selected-bg: var(--utesa-green-light);
  --conf-theme-menu-selected-border: var(--utesa-gold);

  --conf-theme-hover-bg: var(--utesa-green-light);
  --conf-theme-hover-color: var(--utesa-green-dark);

  --conf-theme-support-bg: var(--utesa-surface);
  --conf-theme-support-border: var(--utesa-border);
  --conf-theme-support-header-bg: var(--utesa-green);
  --conf-theme-support-header-text: #ffffff;
  --conf-theme-support-text: var(--utesa-muted);

  --conf-theme-announcement-bg: var(--utesa-green-light);
  --conf-theme-announcement-border: var(--utesa-green);
  --conf-theme-announcement-text: var(--utesa-ink);
}

/* ==========================================================================
   Self-hosted fonts.
   Served by Indico's static customization mount at /static/custom/files/fonts/.
   File names are provided by the deployment agent: montserrat-600.woff2, etc.
   font-display: swap keeps text visible (in the system-ui fallback) while
   the woff2 loads, so nothing is blocked if the files are briefly missing.
   ========================================================================== */

@font-face {
  font-family: 'Montserrat';
  src: url('/static/custom/files/fonts/montserrat-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/static/custom/files/fonts/montserrat-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/static/custom/files/fonts/roboto-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/static/custom/files/fonts/roboto-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/static/custom/files/fonts/roboto-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Base typography
   ========================================================================== */

body {
  font-family: var(--utesa-font-body);
  color: var(--utesa-ink);
  background: var(--utesa-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--utesa-font-heading);
  font-weight: 700;
  color: var(--utesa-ink);
}

/* Indico uses .i-button and other elements with their own font stacks;
   this keeps plain body copy (category descriptions, footer text, flashed
   messages) on brand without reaching into event-page-specific structures. */
p, li, span, label, td, th {
  font-family: inherit;
}

a {
  color: var(--utesa-green);
}

a:hover,
a:focus {
  color: var(--utesa-green-dark);
}

/* Visible focus ring on all interactive elements — never remove outlines,
   only restyle them on-brand. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.i-button:focus-visible {
  outline: 2px solid var(--utesa-green);
  outline-offset: 2px;
}