/* ============================================================================
   CONSULATE — design tokens, RECOLOURED FOR PACRON
   ----------------------------------------------------------------------------
   WHAT  A verbatim structural copy of the CONSULATE token file at
         /home/hermes/joe/repos/YB_Travel/assets/tokens.css, with the colour
         VALUES swapped for Pacron's own palette (pacron.com, Webflow).

   WHY   CONSULATE is Locked and must not be redesigned — only recoloured.
         Every token name, comment, size, height and rule below is unchanged
         from the original file so that any CONSULATE component CSS drops
         straight in. Only the hex values in the BRAND, SURFACES, BORDERS,
         INK, FOCUS and STATUS blocks differ.

   HOW   The Pacron palette, as named in UI_BUILD_BRIEF.md:
           #0E1741  deep navy, dominant   -> --c-crown
           #19A7BA  cyan/teal accent      -> --c-gold
           #1B205C  secondary navy        -> --c-crown-hover / --c-link
           #7AC043 / #25AF56  greens      -> positive states only, sparingly
           #F0F2FA / #ECF1FA  pale blue-greys -> canvas and service bands

   RULES FOR ANY AGENT OR DEVELOPER TOUCHING THIS CODEBASE:
   1. Never write a raw hex value in a component. Use a token.
   2. Never add a token without adding it here first.
   3. Never introduce a border-radius. There is no radius scale, on purpose.
   4. Never introduce a shadow except --shadow-window, which belongs to
      exactly two surfaces: S2 the window and S3 the confirm. Nothing else.
   5. If a value you need does not exist here, the design has not been made yet.
      Stop and ask, do not invent one.
   ============================================================================ */

:root {

  /* ---------- BRAND ------------------------------------------------------ */
  --c-crown:            #0E1741;  /* the navy band, primary buttons, icon tiles */
  --c-crown-border:     #080E28;  /* 2px rule under the crown, record window border */
  --c-crown-hover:      #1B205C;  /* object tab hover fill */
  --c-crown-rule:       #3A4478;  /* hairline rules INSIDE the crown only */
  --c-crown-ink:        #A9B2D4;  /* secondary text on the crown */
  --c-gold:             #19A7BA;  /* crest tile, Go button, active queue tab underline */
  --c-link:             #1B205C;  /* in-page hyperlinks (ALWAYS underlined) */

  /* ---------- SURFACES --------------------------------------------------- */
  --c-canvas:           #E3E8F5;  /* the pale blue-grey page field behind the box */
  --c-surface:          #FFFFFF;  /* the box, the record window, inputs */
  --c-band-header:      #DCE2F2;  /* section header strips. A heading is a FILLED BAND. */
  --c-band-service:    #F0F2FA;  /* column headers, group headers, pagination, row hover */

  /* ---------- BORDERS ----------------------------------------------------
     Two weights, and the difference between them is the entire grammar:
       2px --c-border-container  = "this is a container, something is enclosed"
       1px --c-border-item       = "these are items in a list"
     Do not invent a third weight.                                            */
  --c-border-container: #BCC2D6;
  --c-border-item:      #DBDFEC;
  --c-border-field:     #ECF1FA;  /* rule under each form field row */
  --c-border-control:   #A6ACC2;  /* inputs, selects, secondary buttons */

  /* ---------- INK -------------------------------------------------------- */
  --c-ink:              #171B2B;  /* primary text */
  --c-ink-2:            #575E77;  /* secondary text, labels, inactive tabs */
  --c-ink-3:            #878DA3;  /* tertiary: eyebrows, placeholders, counts */
  --c-ink-invert:       #FFFFFF;
  --c-ink-on-band:      #0E1741;  /* section header strip label ONLY */

  /* ---------- FOCUS -------------------------------------------------------
     One focus treatment for every interactive element in the product.
     A 2px outline offset 1px, so it reads as a square ring outside the
     element's own square border. Never a glow, never a colour change,
     never a radius.                                                          */
  --focus-ring:         2px solid #0E1741;
  --focus-offset:       1px;

  /* ---------- STATUS -----------------------------------------------------
     Urgency in CONSULATE is a SENTENCE, not a colour block. These colours
     apply to TEXT ONLY. Never a fill, never a row background, never a chip.  */
  --c-urgent:           #A32116;  /* deadline inside 4 hours */
  --c-overdue:          #7A1710;  /* deadline passed */
  --c-good:             #25AF56;  /* paid, ticketed, connected. Text only. */

  /* ---------- SHAPE ------------------------------------------------------ */
  --radius:             0;        /* every element, no exceptions, forever */
  --shadow-window:      0 6px 24px rgba(0,0,0,0.35); /* S2 window + S3 confirm ONLY */

  /* ---------- TYPE -------------------------------------------------------
     One family. No second family. No monospace anywhere in the product.
     Chosen because it is wide, has a large x-height, is present on every
     Windows machine in the office, and is the most legible thing available
     to a 55-year-old at 14px.                                                */
  --font: Tahoma, Verdana, Geneva, sans-serif;

  --t-wordmark:         15px;  /* 700, uppercase, 1.2px tracking */
  --t-h1:               22px;  /* 700, page header */
  --t-window-title:     15px;  /* 700, record window title bar */
  --t-tab-object:       14px;  /* 600 inactive / 700 active */
  --t-body:             14px;  /* 400, row primary text, button labels */
  --t-tab-queue:        13px;  /* 600 */
  --t-control:          13px;  /* 400 labels, 600 select values */
  --t-secondary:        13px;  /* 400, row secondary text, count lines */
  --t-header:           12px;  /* 700 uppercase 0.7px, section header strips */
  --t-column:           12px;  /* 700 sentence case, column headers */
  --t-eyebrow:          11px;  /* 700 uppercase 0.7px */

  /* ---------- SPACING ----------------------------------------------------
     4px grid. Page gutter is 20px and never changes.                        */
  --gutter:             20px;
  --pad-box:            14px;  /* inset inside the box */
  --pad-window:         20px;  /* inset inside the record window body */

  /* ---------- FIXED HEIGHTS ----------------------------------------------
     These are structural. Changing one changes the silhouette of the product. */
  --h-crown-row1:       44px;
  --h-crown-row2:       40px;  /* object tabs. Crown total = 84px */
  --h-queue-band:       38px;
  --h-page-header:      64px;
  --h-section-strip:    32px;
  --h-control-strip:    44px;
  --h-column-header:    30px;
  --h-group-header:     26px;
  --h-row:              44px;  /* data row. Wide and readable, on purpose. */
  --h-button:           34px;
  --h-input:            30px;
  --h-pagination:       38px;
  --h-window-title:     40px;
  --h-window-tabs:      34px;
}

/* Numerals: tabular figures on any RIGHT-ALIGNED NUMERIC OR CURRENCY column
   (fares, fees, totals, balances, pagination counts). See 00-DECISIONS.md D7.
   Left-aligned text, dates, times and deadline sentences stay proportional.
   There is still no monospace font anywhere in this product. */
.num, .fare, .fee, .total, .balance, .pagination-count {
  font-variant-numeric: tabular-nums;
}