/* ==========================================================================
   celona-tools.css
   Shared brand foundation for standalone interactive tools embedded on
   celona.io via the `toolEmbed` page-builder module.

   A tool is its own HTML document loaded in an iframe, so it inherits none
   of the site's CSS. This file gives every tool the brand tokens, type scale
   and control primitives so tools look like the site without duplicating
   (or drifting from) the theme.

   Source of truth: docs/celona-brand-guidelines.md
   Built 2026-08-03 alongside the Wireless TCO calculator (the first tool).

   HOW TO USE IN A NEW TOOL
     <link rel="stylesheet" href="/tools/celona-tools.css">
     ...then add only tool-specific CSS on top. Never redefine a token here.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  /* Palette - the 10 brand swatches. Do not add colours here. */
  --celona-white:          #FFFFFF;
  --celona-light-buff:     #F5F3EC;
  --celona-warm-linen:     #ECE5D5;
  --celona-dark-blue:      #00304A;
  --celona-deep-cobalt:    #0B5394;
  --celona-rich-charcoal:  #191919;
  --celona-light-charcoal: #C3CBD5;
  --celona-warm-taupe:     #C0B399;
  --celona-teal:           #5AA7A0;
  --celona-charcoal:       #414041;

  /* Type colour - automatic by ground, never hand-set per element */
  --celona-ink:            #00304A;
  --celona-grey:           #55676E;

  /* Derived hairlines. Warm Taupe at low alpha - the only sanctioned
     way to get a rule colour without inventing a swatch. */
  --celona-rule:           rgba(192,179,153,.55);
  --celona-rule-strong:    rgba(192,179,153,.9);
  --celona-field-border:   rgba(0,48,74,.25);

  --celona-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --celona-mono: 'Roboto Mono', ui-monospace, Consolas, monospace;

  --celona-radius-button: 30px;  /* pill */
  --celona-radius-card:   25px;
  --celona-radius-field:  8px;   /* matches the site's HubSpot form skin */

  /* Tool type scale - LOCKED (client, 2026-08-03: "set variability and a
     minimum spec"). Four steps, one floor. Nothing in a tool renders below
     the floor - the only things allowed AT the floor are footnotes, config
     lines and legal/disclaimer text. Cost/data tables are NEVER fine print.
     Glyphs (chevrons, tooltip triggers) count as text: floor applies. */
  --t-body:  15px;    /* controls, labels, buttons, running text          */
  --t-data:  14.5px;  /* every data/price/breakdown table cell            */
  --t-label: 12.5px;  /* eyebrow labels, column headers, hints (min 12px) */
  --t-fine:  11.5px;  /* THE FLOOR - footnotes, config, disclaimer only   */
}

/* --- 2. Document --------------------------------------------------------- */
/* Transparent ground: the tool sits inside a band whose colour is set in the
   CP on the toolEmbed module. The tool must not paint its own background. */
html,body{
  margin:0;
  background:transparent;
  font-family:var(--celona-sans);
  color:var(--celona-ink);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
*{box-sizing:border-box}

/* --- 3. Type ------------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--celona-sans);margin:0;color:var(--celona-ink);text-wrap:balance}
.t-lead{color:var(--celona-grey);line-height:1.55}
.t-grey{color:var(--celona-grey)}
.t-mono{font-family:var(--celona-mono)}

/* The eyebrow motif: Roboto Mono, uppercase, letter-spaced, teal, slash-prefixed. */
.t-eyebrow{
  /* Matches the site's section eyebrows: measured 16px / 500 / 2px tracking. */
  font-family:var(--celona-mono);font-weight:500;font-size:16px;
  letter-spacing:.125em;text-transform:uppercase;color:var(--celona-teal);
  display:flex;align-items:center;gap:9px;margin:0;
}
.t-eyebrow::before{content:"/";font-weight:700}
.t-rule{height:1px;background:var(--celona-warm-taupe);margin:9px 0 0}

/* --- 4. Surfaces --------------------------------------------------------- */
/* Brand card: 25px radius, 1px border, white ground, NO drop shadow (s9). */
.t-card{
  background:var(--celona-white);
  border:1px solid var(--celona-rule);
  border-radius:var(--celona-radius-card);
  padding:22px 24px;
}
.t-card--quiet{background:var(--celona-light-buff)}

/* --- 5. Controls --------------------------------------------------------- */
select,
input[type=number],
input[type=text]{
  width:100%;
  padding:.65rem .9rem;
  font-family:var(--celona-sans);
  font-size:15px;
  color:var(--celona-ink);
  background:var(--celona-white);
  border:1px solid var(--celona-field-border);
  border-radius:var(--celona-radius-field);
}
select:focus,input:focus{
  outline:2px solid var(--celona-teal);
  outline-offset:0;
  border-color:var(--celona-teal);
}

/* Brand button: pill, 16px/600, no text-transform. */
.t-btn{
  font-family:var(--celona-sans);font-size:16px;font-weight:600;
  padding:8.4px 20px;border-radius:var(--celona-radius-button);
  cursor:pointer;transition:.15s;border:1px solid var(--celona-dark-blue);
  background:var(--celona-dark-blue);color:var(--celona-white);
}
.t-btn:hover{background:var(--celona-deep-cobalt);border-color:var(--celona-deep-cobalt)}
.t-btn--outline{background:transparent;color:var(--celona-dark-blue)}
.t-btn--outline:hover{background:var(--celona-light-buff);color:var(--celona-dark-blue)}
.t-btn:focus-visible{outline:2px solid var(--celona-teal);outline-offset:2px}

/* --- 6. Data ------------------------------------------------------------- */
/* Chart series. Four in-palette hues, ordered by visual weight so the
   primary cost driver reads first. Semantic state is NOT in this set. */
:root{
  --celona-series-1: #00304A;  /* Dark Blue    - hardware / subscription */
  --celona-series-2: #0B5394;  /* Deep Cobalt  - software & support     */
  --celona-series-3: #5AA7A0;  /* Teal         - add-on / accent series */
  --celona-series-4: #C0B399;  /* Warm Taupe   - installation           */
}

/* Estimated / assumed values. The palette has no semantic warning colour,
   so attention is carried by the accent rather than an invented amber.
   See docs/celona-brand-guidelines.md s10 - open question, awaiting ruling. */
.t-estimated{
  color:var(--celona-teal);
  font-style:italic;
  background:rgba(90,167,160,.07);
  border-color:rgba(90,167,160,.45);
}
.t-star{color:var(--celona-teal);font-weight:700}

table{font-variant-numeric:tabular-nums}

/* --- 7. Motion ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}