/* ============================================================================
   Turnout brand stylesheet
   Kathuko APEX 26.2 from Zero, Part 9

   The look follows graycells.us.com: calm warm neutrals, one confident accent,
   system fonts, rounded tiles and plenty of space.

   One rule for the whole file: set Universal Theme's CSS variables, never
   override its class names. Variables are the theme's public interface and
   survive APEX upgrades; class overrides break on the next release.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Brand tokens (Lesson 9.1). Every color and size the brand uses, once.
   ------------------------------------------------------------------------- */
:root {
  --tn-ink:         #1d1d1f;   /* text */
  --tn-muted:       #6e6e73;   /* secondary text */
  --tn-paper:       #ffffff;   /* cards, regions */
  --tn-band:        #f5f5f7;   /* page background */
  --tn-rule:        #d2d2d7;   /* hairlines */
  --tn-link:        #0066cc;   /* links and focus rings */
  --tn-ember:       #c2410c;   /* the Turnout accent: buttons, logo, highlights */
  --tn-ember-dark:  #9a3412;   /* hover and pressed */
  --tn-ember-tint:  #fff1e8;   /* soft accent backgrounds */
  --tn-header:      rgba(251, 251, 253, 0.92);
  --tn-radius:      18px;      /* cards and regions */
  --tn-radius-sm:   10px;      /* inputs */
  --tn-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
             "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
   2. Map the tokens onto Universal Theme (Lesson 9.4)
   ------------------------------------------------------------------------- */
:root {
  /* Type */
  --a-base-font-family: var(--tn-font);

  /* The primary palette drives hot buttons, links in components, selected
     states and focus. Change it here and the whole app follows. */
  --ut-palette-primary:          var(--tn-ember);
  --ut-palette-primary-contrast: #ffffff;
  --ut-palette-primary-shade:    var(--tn-ember-tint);
  --ut-link-text-color:          var(--tn-link);
  --ut-focus-outline-color:      var(--tn-link);

  /* Page */
  --ut-body-background-color:       var(--tn-band);
  --ut-body-text-color:             var(--tn-ink);
  --ut-body-title-background-color: var(--tn-band);

  /* Header and top navigation: light and quiet, like graycells.us.com */
  --ut-header-background-color:     var(--tn-header);
  --ut-header-text-color:           var(--tn-ink);
  --ut-header-border-color:         var(--tn-rule);
  /* The top navigation is a menu bar inside the header */
  --ut-header-menubar-background-color:         var(--tn-header);
  --ut-header-menubar-item-text-color:          var(--tn-ink);
  --ut-header-menubar-item-border-color:        transparent;
  --ut-header-menubar-item-hover-background-color: rgba(0, 0, 0, 0.04);
  --ut-header-menubar-item-hover-text-color:    var(--tn-ink);
  --ut-header-menubar-item-current-background-color: var(--tn-ember-tint);
  --ut-header-menubar-item-current-text-color:  var(--tn-ember-dark);

  /* Sign-in page: the same band and white tile as every other page */
  --ut-login-page-background-color:   var(--tn-band);
  --ut-login-region-background-color: var(--tn-paper);
  --ut-login-region-filter:           none;
  --ut-login-region-box-shadow:       0 12px 32px rgba(0, 0, 0, 0.08);

  /* Regions and cards: white tiles with soft corners, no heavy borders */
  --ut-component-background-color: var(--tn-paper);
  --ut-component-border-color:     rgba(0, 0, 0, 0.06);
  --ut-component-border-radius:    var(--tn-radius);
  --ut-region-border-radius:       var(--tn-radius);
  --ut-region-header-background-color: var(--tn-paper);
  --a-cv-border-radius:            var(--tn-radius);
  --a-cv-border-color:             rgba(0, 0, 0, 0.06);
  --a-cv-header-border-color:      transparent;
  --a-cv-subtitle-text-color:      var(--tn-muted);
  --a-cv-badge-border-radius:      999px;
  --ut-hero-region-icon-border-radius: 14px;

  /* Buttons: pill shaped, slightly larger and easier to tap */
  --a-button-border-radius: 999px;
  --a-button-font-size:     .875rem;
  --a-button-padding-y:     .5625rem;
  --a-button-padding-x:     1.125rem;
}

/* ---------------------------------------------------------------------------
   3. Hot buttons (Lesson 9.4)
   The Iris style paints hot buttons near-black on the button class itself, so
   the primary palette never reaches them. We still only set variables: the
   button's own --a-button-* variables, on the same class Iris uses.
   ------------------------------------------------------------------------- */
.t-Button--hot,
.a-Button--hot {
  --a-button-background-color:        var(--tn-ember);
  --a-button-text-color:              #ffffff;
  --a-button-hover-background-color:  var(--tn-ember-dark);
  --a-button-active-background-color: #7c2d12;
}