/* ============================================================================
   IPL Platform — design tokens
   One source of truth for every tool folder on the site. Link this before any
   tool's own <style> block:  <link rel="stylesheet" href="../ipl-tokens.css">

   Reconciles the four palette variants that had drifted across the diagnostics
   (three --line values, four soft-ink values, two naming schemes). Where the
   existing tools disagreed, the value chosen is noted.
   ============================================================================ */

:root{
  /* --- Core palette (identical across every tool today) ------------------- */
  --ink:        #1F302E;
  --cream:      #F4ECDA;
  --orange:     #C77F3D;
  --teal:       #7FA68C;

  /* --- Brand red -----------------------------------------------------------
     --red      display use only: headings, callout titles, fills, rules.
                3.62:1 on cream — compliant at 24px, or 18.66px bold, and above.
     --red-text body-size emphasis. 5.33:1 on cream — compliant at any size.
                Orange is 2.73:1 on cream and must never carry text on it.     */
  --red:        #CD5253;
  --red-text:   #B42C33;

  /* --- Neutrals ------------------------------------------------------------
     --line     Atlas value (#d9cfb8) over the landing page's #E1D8C4: it is the
                majority across the tools and reads warmer against cream.
     --ink-2    Atlas value (#3a4f4c) over #4C5A57 and #3c534f: highest contrast
                of the three, and secondary text is where contrast fails first. */
  --paper:      #FBF7EE;
  --line:       #d9cfb8;
  --ink-2:      #3a4f4c;
  --danger:     #a8442a;
  --ok:         #4d7a5e;

  /* --- Type ---------------------------------------------------------------
     Names follow the Atlas scheme (--serif / --sans), not the landing page's
     --display / --body. Load the webfonts in every tool's <head>; GFS
     Baskerville is deliberately absent — it is not on Google Fonts and rendered
     for almost nobody.                                                        */
  --serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --sans:  "Carlito", Calibri, "Segoe UI", system-ui, -apple-system, sans-serif;

  /* --- Elevation & shape --------------------------------------------------- */
  --shadow:    0 1px 3px rgba(31,48,46,.10), 0 6px 20px rgba(31,48,46,.06);
  --shadow-lg: 0 12px 30px rgba(31,48,46,.12);
  --r:   10px;
  --r-lg: 16px;
}

*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  font-family:var(--sans); color:var(--ink); background:var(--cream);
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--serif); font-weight:700; line-height:1.15; margin:0 }
a{ color:var(--red-text) }
.hl{ color:var(--red-text); font-weight:700 }

/* --- Buttons — the Atlas set, which is the only complete one --------------- */
button,.btn{
  font-family:var(--sans); font-size:15px; cursor:pointer; border-radius:8px;
  border:1px solid transparent; padding:11px 18px; transition:.15s;
  text-decoration:none; display:inline-block;
}
.btn-primary{ background:var(--orange); color:#fff; font-weight:700 }
.btn-primary:hover{ background:#b06e30 }
.btn-ghost{ background:transparent; border-color:var(--line); color:var(--ink) }
.btn-ghost:hover{ border-color:var(--teal) }
.btn-danger{ background:transparent; border-color:var(--danger); color:var(--danger) }
.btn:disabled,button:disabled{ opacity:.4; cursor:not-allowed }

/* --- Surfaces -------------------------------------------------------------- */
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:22px 24px;
}
.eyebrow{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--red-text); font-weight:700;
}
.pill{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:5px 10px;
  border:1px solid var(--line); border-radius:999px; color:var(--ink-2); white-space:nowrap;
}

/* --- Forms ----------------------------------------------------------------- */
input[type=text],input[type=email],input[type=password],input[type=date],select,textarea{
  font-family:var(--sans); font-size:15px; width:100%; padding:11px 12px;
  border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink);
}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal);
}
label.fld{ display:block; font-size:13px; font-weight:700; margin:14px 0 6px }
.hint{ font-size:12.5px; color:var(--ink-2); margin-top:5px }
