/* ============================
    flx-theme.css
    - Tokens (CSS variables)
    - Legacy/helpers (aspect wrappers, abs fill, etc.)
    - Semantic utilities (bg/text/border + hover:text-*)
    - Components (e.g., buttons)
============================ */



/* -----------------------------
    Tokens:
    Typography - 1rem = 10px (html 62.5%)
    CPL Colors
------------------------------ */
:root {
  --font-sans: 'Josefin Sans', sans-serif;

  /* Sizes */
  --text-xs:   1.1rem; /* 11px */
  --text-sm:   1.3rem; /* 13px */
  --text-md:   1.4rem; /* 14px */
  --text-base: 1.6rem; /* 16px (default) */
  --text-lg:   1.8rem; /* 18px */
  --text-xl:   2.4rem; /* 20px */

  /* Line-heights */
  --lh-snug:   1.00;
  --lh-tight:  1.15;
  --lh-normal: 1.35;
  --lh-loose:  1.5;

  /* Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* letter-spacing */
  --tracking-medium:  0.1em;
  --tracking-wide:    0.2em;

  --cpl-black:     #333333;
  --cpl-white:     #FFFFFF;
  --cpl-dk-gray:   #484a56;
  --cpl-md-gray:   #99a1b7;
  --cpl-fr-gray:   #DBDBDB;
  --cpl-lt-gray:   #FCFCFC;

  --cpl-dk-blue:   #0D004E;
  --cpl-md-blue:   #273789;
  --cpl-bt-blue:   #255fff;

  --cpl-lt-yellow: #FFE08F;
  --cpl-yellow:    #FFC836;

  --cpl-red:       #ff494e;
  --cpl-md-red:    #dc3234;
  --cpl-lt-red:    #ff6160;

  --cpl-green:     #00b546;

  --cpl-practice-community:   #78AF3E;
  --cpl-practice-healthcare:  #9E79E5;
  --cpl-practice-highered:    #20A1D3;
  --cpl-practice-k12:         #E5424C;
  --cpl-practice-transport:   #F46E0B;
}

/* -----------------------------
    Reset
------------------------------ */
img { max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
button { border: none; background: none; cursor: pointer; }
h1,h2,h3,h4,h5,h6 { margin: 1.6rem 0 0; }

fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 0.8rem;
  min-inline-size: 0; /* important for grid/flex layouts */
}

legend {
  padding: 0;
  margin: 0 0 0.4rem;
  float: none;
  width: auto;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;

  margin-block: 0;
  margin-inline: 0;
  padding-block: 0;
  padding-inline: 0;

  box-sizing: border-box;
}

/* -----------------------------
    Font stack — simple and inheritable
------------------------------ */
html { font-size: 62.5%; } /* 1rem = 10px */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
}
table, td, a, input, button, select, textarea { font-family: inherit; }

/* Override normalize v8’s control line-height */
button, input, select { line-height: var(--lh-tight); }
textarea { line-height: var(--lh-loose); }

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }

.leading-tight { line-height: var(--lh-tight); }
.leading-normal { line-height: var(--lh-normal); }
.leading-loose { line-height: var(--lh-loose); }

.font-regular { font-weight: var(--weight-regular); }
.font-medium { font-weight: var(--weight-medium); }
.font-bold { font-weight: var(--weight-bold); }

h1 { margin: 0; } /* normalize.css override */

/* -----------------------------
    Layout helpers
------------------------------ */
.rb100 {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.abs-fill-wrapper {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  height: 100%;
}

.table-table {
  position: relative;
  display: table;
  height: 100%;
  width: 100%;
}

.table-cell {
  position: relative;
  display: table-cell;
  height: 100%;
  width: 100%;
  vertical-align: middle;
}

/* Aspect ratio helpers */
.aspect-wrapper {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}

.aspect-content {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

.aspect-21-9 { padding-top: 42.857%; }
.aspect-16-9 { padding-top: 56.25%; }
.aspect-3-2  { padding-top: 66.666%; }
.aspect-4-3  { padding-top: 75%; }
.aspect-6-5  { padding-top: 83.333%; }
.aspect-1-1  { padding-top: 100%; }

.center-absolute {
  position: absolute;
  bottom: 50%;
  right: 50%;
  transform: translate(50%, 50%);
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-center {
  display: grid;
  place-items: center;
}

/* -----------------------------
    Semantic color utilities
------------------------------ */
/* Backgrounds */
.bg-cpl-white { background-color: var(--cpl-white); }
.bg-cpl-black { background-color: var(--cpl-black); }
.bg-cpl-dk-gray { background-color: var(--cpl-dk-gray); }
.bg-cpl-md-gray { background-color: var(--cpl-md-gray); }
.bg-cpl-fr-gray { background-color: var(--cpl-fr-gray); }
.bg-cpl-lt-gray { background-color: var(--cpl-lt-gray); }
.bg-cpl-dk-blue { background-color: var(--cpl-dk-blue); }
.bg-cpl-md-blue { background-color: var(--cpl-md-blue); }
.bg-cpl-bt-blue { background-color: var(--cpl-bt-blue); }
.bg-cpl-lt-yellow { background-color: var(--cpl-lt-yellow); }
.bg-cpl-yellow { background-color: var(--cpl-yellow); }
.bg-cpl-red { background-color: var(--cpl-red); }
.bg-cpl-green { background-color: var(--cpl-green); }
.bg-cpl-practice-community { background-color: var(--cpl-practice-community); }
.bg-cpl-practice-healthcare { background-color: var(--cpl-practice-healthcare); }
.bg-cpl-practice-highered { background-color: var(--cpl-practice-highered); }
.bg-cpl-practice-k12 { background-color: var(--cpl-practice-k12); }
.bg-cpl-practice-transport { background-color: var(--cpl-practice-transport); }

/* Text colors */
.text-cpl-white { color: var(--cpl-white); }
.text-cpl-black { color: var(--cpl-black); }
.text-cpl-dk-gray { color: var(--cpl-dk-gray); }
.text-cpl-md-gray { color: var(--cpl-md-gray); }
.text-cpl-fr-gray { color: var(--cpl-fr-gray); }
.text-cpl-lt-gray { color: var(--cpl-lt-gray); }
.text-cpl-dk-blue { color: var(--cpl-dk-blue); }
.text-cpl-md-blue { color: var(--cpl-md-blue); }
.text-cpl-bt-blue { color: var(--cpl-bt-blue); }
.text-cpl-lt-yellow { color: var(--cpl-lt-yellow); }
.text-cpl-yellow { color: var(--cpl-yellow); }
.text-cpl-red { color: var(--cpl-red); }
.text-cpl-green { color: var(--cpl-green); }
.text-cpl-practice-community { color: var(--cpl-practice-community); }
.text-cpl-practice-healthcare { color: var(--cpl-practice-healthcare); }
.text-cpl-practice-highered { color: var(--cpl-practice-highered); }
.text-cpl-practice-k12 { color: var(--cpl-practice-k12); }
.text-cpl-practice-transport { color: var(--cpl-practice-transport); }

/* Border colors */
.border-cpl-white { border-color: var(--cpl-white); }
.border-cpl-black { border-color: var(--cpl-black); }
.border-cpl-dk-gray { border-color: var(--cpl-dk-gray); }
.border-cpl-md-gray { border-color: var(--cpl-md-gray); }
.border-cpl-fr-gray { border-color: var(--cpl-fr-gray); }
.border-cpl-lt-gray { border-color: var(--cpl-lt-gray); }
.border-cpl-dk-blue { border-color: var(--cpl-dk-blue); }
.border-cpl-md-blue { border-color: var(--cpl-md-blue); }
.border-cpl-bt-blue { border-color: var(--cpl-bt-blue); }
.border-cpl-lt-yellow { border-color: var(--cpl-lt-yellow); }
.border-cpl-yellow { border-color: var(--cpl-yellow); }
.border-cpl-red { border-color: var(--cpl-red); }
.border-cpl-green { border-color: var(--cpl-green); }
.border-cpl-practice-community { border-color: var(--cpl-practice-community); }
.border-cpl-practice-healthcare { border-color: var(--cpl-practice-healthcare); }
.border-cpl-practice-highered { border-color: var(--cpl-practice-highered); }
.border-cpl-practice-k12 { border-color: var(--cpl-practice-k12); }
.border-cpl-practice-transport { border-color: var(--cpl-practice-transport); }

/* Hover text colors (Tailwind-ish, no build)
   HTML: class="hover:text-cpl-white"
   CSS needs the escaped colon in the selector. */
.hover\:text-cpl-white:hover { color: var(--cpl-white); }
.hover\:text-cpl-black:hover { color: var(--cpl-black); }
.hover\:text-cpl-dk-gray:hover { color: var(--cpl-dk-gray); }
.hover\:text-cpl-md-gray:hover { color: var(--cpl-md-gray); }
.hover\:text-cpl-fr-gray:hover { color: var(--cpl-fr-gray); }
.hover\:text-cpl-lt-gray:hover { color: var(--cpl-lt-gray); }
.hover\:text-cpl-dk-blue:hover { color: var(--cpl-dk-blue); }
.hover\:text-cpl-md-blue:hover { color: var(--cpl-md-blue); }
.hover\:text-cpl-bt-blue:hover { color: var(--cpl-bt-blue); }
.hover\:text-cpl-lt-yellow:hover { color: var(--cpl-lt-yellow); }
.hover\:text-cpl-yellow:hover { color: var(--cpl-yellow); }
.hover\:text-cpl-red:hover { color: var(--cpl-red); }
.hover\:text-cpl-green:hover { color: var(--cpl-green); }
.hover\:text-cpl-practice-community:hover { color: var(--cpl-practice-community); }
.hover\:text-cpl-practice-healthcare:hover { color: var(--cpl-practice-healthcare); }
.hover\:text-cpl-practice-highered:hover { color: var(--cpl-practice-highered); }
.hover\:text-cpl-practice-k12:hover { color: var(--cpl-practice-k12); }
.hover\:text-cpl-practice-transport:hover { color: var(--cpl-practice-transport); }

/* One-off token alias */
.hover\:text-primary:hover { color: var(--cpl-md-blue); }

/* -----------------------------
    CPL Button component
------------------------------ */
.cpl-btn {
  font-family: inherit;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-medium);
  text-transform: uppercase;

  font-size: var(--text-md);
  line-height: var(--lh-tight);

  transition: color 0.15s ease-out, background-color 0.15s ease-out;
  padding: 0 2.4rem;
  cursor: pointer;
}

.cpl-btn:hover {
  background-color: var(--cpl-md-blue);
  color: var(--cpl-white);
}

.cpl-btn-primary     { background-color: var(--cpl-yellow); color: var(--cpl-dk-blue); }
.cpl-btn-secondary   { background-color: var(--cpl-dk-blue); color: var(--cpl-white); }
.cpl-btn-tertiary    { background-color: var(--cpl-fr-gray); color: var(--cpl-dk-blue); }
.cpl-btn-destructive { background-color: var(--cpl-red); color: var(--cpl-white); }

.cpl-btn.cpl-btn-destructive:hover {
  background-color: var(--cpl-black);
  color: var(--cpl-red);
}