/*
 * tokens-bridge.css
 * Maps theme.json design tokens (emitted by WordPress as --wp--preset--*) onto
 * the Bootstrap 5 variables Bootstrap reads (--bs-*).
 *
 * Loaded after bootstrap.min.css via functions.php so this layer wins the
 * cascade for any --bs-* set here. Start narrow: only the variables we
 * actually want driven by theme.json. Expand as we trust the chain.
 *
 * See docs/CONFIG.md and backlog/tasks/task-11 for the rationale.
 */

:root {
  --bs-primary:        var(--wp--preset--color--ic-orange);
  --bs-heading-color:  var(--wp--preset--color--ic-orange);
}

/*
 * IC block-CSS alias layer.
 *
 * Invictus's per-block CSS (ported to ocrinvictus under assets/blocks/*.css)
 * references its own token names like --color-ic-orange, --spacing-md,
 * --radius-md. Map those onto ocrinvictus's --wp--preset--* values here so
 * the per-block CSS can ship verbatim. New values that ocrinvictus doesn't
 * have a preset for (alphas, radii, transitions, orange-light) are defined
 * inline below.
 */
:root {
  /* Colors — alias to existing ocrinvictus presets */
  --color-ic-orange:        var(--wp--preset--color--ic-orange);
  --color-ic-orange-dark:   var(--wp--preset--color--ic-orange-dark);
  --color-ic-white:         var(--wp--preset--color--ic-text-primary);
  --color-ic-black:         var(--wp--preset--color--ic-black);
  --color-ic-grey-light:    var(--wp--preset--color--ic-grey-light);
  --color-ic-grey-dark:     var(--wp--preset--color--ic-bg-dark);
  --color-ic-grey-lighter:  var(--wp--preset--color--ic-bg-card);

  /* Colors — new values not in ocrinvictus presets */
  --color-ic-orange-light:  #FF8C33;
  --ic-orange-a25:          rgba(255, 109, 0, 0.25);
  --ic-orange-a10:          rgba(255, 109, 0, 0.10);

  /* Spacing — alias Invictus t-shirt names to ocrinvictus numeric slugs */
  --spacing-xs:  var(--wp--preset--spacing--20); /* 0.5rem */
  --spacing-sm:  var(--wp--preset--spacing--30); /* 1rem   */
  --spacing-md:  var(--wp--preset--spacing--40); /* 1.5rem */
  --spacing-lg:  var(--wp--preset--spacing--50); /* 2rem   */
  --spacing-xl:  var(--wp--preset--spacing--60); /* 3rem   */
  --spacing-2xl: var(--wp--preset--spacing--70); /* 4rem   */

  /* Font sizes — alias Invictus names to ocrinvictus slugs */
  --font-size-xs:   var(--wp--preset--font-size--xs);
  --font-size-sm:   var(--wp--preset--font-size--sm);
  --font-size-base: var(--wp--preset--font-size--base);
  --font-size-md:   var(--wp--preset--font-size--md);
  --font-size-lg:   var(--wp--preset--font-size--lg);
  --font-size-xl:   var(--wp--preset--font-size--xl);
  --font-size-2xl:  var(--wp--preset--font-size--2xl);
  --font-size-hero: var(--wp--preset--font-size--hero);

  /* Font families — ocrinvictus only has Inter; alias display→body */
  --font-ic-body:    var(--wp--preset--font-family--ic-body);
  --font-ic-display: var(--wp--preset--font-family--ic-body);

  /* Radii, transitions — new values */
  --radius-md:        0.5rem;
  --radius-lg:        1rem;
  --transition-default: 0.2s ease;
}

/*
 * Form controls + buttons inherit the document font (Inter).
 *
 * Browser UA stylesheets reset <input>/<textarea>/<select>/<button> to system
 * fonts (SF Pro on macOS, Menlo for type=tel, etc.) regardless of body
 * font-family. Bootstrap doesn't override this either. So WP forms (prijava,
 * uredi-hipodrom, contact-us, …) render with the wrong typeface even though
 * everything around them is Inter. One global rule fixes the whole site.
 */
input, textarea, select, button,
.form-control, .form-label, .form-select, .form-check-label {
  font-family: inherit;
}

/*
 * IC Prijava + Uredi form components (AC-48 + AC-61).
 *
 * Both shortcodes share the same visual language — captain-name/team/city/
 * phone/email/notes on a dark background, orange CTA. Styles live here so
 * the PHP shortcodes stay style-free and one tweak updates both surfaces.
 */
.ic-prijava-form .form-label {
  color: #fff;
  font-weight: 600;
}
.ic-prijava-form .ic-alert {
  padding: 1rem;
  border-radius: 6px;
  margin-bottom: 1.5rem;
  border: 1px solid transparent;
}
.ic-prijava-form .ic-alert--success {
  background: #1c3a1c;
  color: #c8f7c8;
  border-color: #3a7a3a;
}
.ic-prijava-form .ic-alert--error {
  background: #5b1a1a;
  color: #ffdada;
  border-color: #a33;
}
.ic-prijava-form .ic-prijava-form__hint {
  color: #aaa;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}
.ic-prijava-form .ic-prijava-form__submit {
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  padding: 14px 32px;
  border: 0;
  border-radius: 6px;
}

/* Members section on the captain-edit page (AC-60). */
.ic-captain-edit__members {
  border: 1px solid #4a4b4d;
  border-radius: 8px;
  padding: 1.25rem;
  margin: 1.5rem 0;
}
.ic-captain-edit__members > legend {
  color: var(--wp--preset--color--ic-orange, #EF8A38);
  text-transform: uppercase;
  font-size: 1.1rem;
  padding: 0 0.5rem;
  width: auto;
}
.ic-captain-edit__members-hint {
  color: #aaa;
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}
.ic-member {
  border: 1px solid #3a3b3d;
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.ic-member:last-child { margin-bottom: 0; }
.ic-member__num {
  display: inline-block;
  color: var(--wp--preset--color--ic-orange, #EF8A38);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
}
.ic-gender { display: flex; gap: 1rem; align-items: center; }
.ic-gender__opt {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #fff;
  cursor: pointer;
}
.ic-gender__opt input { margin: 0; }

/* Locked-state message on /uredi-hipodrom/ when no/expired session. */
.ic-captain-edit-page--locked p {
  color: #D6D6D6;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}