/* ============================================================
   Carmen Municipal College — Design Tokens & Base Styles
   Use: <link rel="stylesheet" href="colors_and_type.css">
   ============================================================ */

/* Webfonts (open-source substitutes — see README) */
@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@400;500;600;700;800&family=Oswald:wght@500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Brand colors ---------- */
  --cmc-navy:        #091e4b;   /* primary */
  --cmc-navy-700:    #0b2557;
  --cmc-navy-600:    #143075;
  --cmc-navy-500:    #1d3f95;
  --cmc-navy-100:    #e6eaf3;
  --cmc-navy-50:     #f3f5fa;

  --cmc-gold:        #dcad3b;   /* primary accent */
  --cmc-gold-700:    #b88c25;
  --cmc-gold-600:    #c69a32;
  --cmc-gold-100:    #fbf2d8;
  --cmc-gold-50:     #fdf9ed;

  --cmc-green:       #1f7a3a;   /* supporting (seal) */
  --cmc-green-100:   #dff0e4;

  --cmc-red:         #c8252c;   /* supporting (seal) */
  --cmc-red-100:     #fadcdd;

  /* ---------- Neutrals ---------- */
  --paper:           #fdfdfb;
  --parchment:       #f5f1e6;
  --hairline:        #e6e3d7;
  --mist:            #9aa3b2;
  --slate:           #3b4252;
  --ink:             #0b0f1a;
  --black:           #000000;
  --white:           #ffffff;

  /* ---------- Semantic ---------- */
  --bg:              var(--paper);
  --bg-muted:        var(--parchment);
  --fg1:             var(--ink);          /* primary text */
  --fg2:             var(--slate);        /* secondary text */
  --fg3:             var(--mist);         /* tertiary / placeholders */
  --fg-on-navy:      #ffffff;
  --fg-on-gold:      var(--cmc-navy);

  --primary:         var(--cmc-navy);
  --primary-fg:      #ffffff;
  --accent:          var(--cmc-gold);
  --accent-fg:       var(--cmc-navy);
  --success:         var(--cmc-green);
  --danger:          var(--cmc-red);

  --border:          var(--hairline);
  --border-strong:   var(--cmc-navy);
  --rule-gold:       var(--cmc-gold);

  /* ---------- Spacing (4pt grid) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ---------- Radii ---------- */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --sh-1: 0 1px 2px rgba(9,30,75,0.06), 0 1px 1px rgba(9,30,75,0.04);
  --sh-2: 0 4px 12px rgba(9,30,75,0.10);
  --sh-3: 0 24px 48px rgba(9,30,75,0.18);
  --sh-inset: inset 0 1px 0 rgba(9,30,75,0.06);

  /* ---------- Motion ---------- */
  --ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast:      120ms;
  --t-default:   200ms;
  --t-overlay:   320ms;
  --t-page:      500ms;

  /* ---------- Type families ---------- */
  --font-display: 'Bitter', Georgia, 'Times New Roman', serif;
  --font-banner:  'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale ---------- */
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-64: 64px;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* ---------- Layout ---------- */
  --container: 1200px;
  --header-h:  64px;
}

/* ============================================================
   Base / reset-ish
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg1);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Semantic typographic vars
   ============================================================ */
.h-display, h1.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-64);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--fg1);
}
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
  margin: 0 0 var(--sp-4) 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-3) 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-2) 0;
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-2) 0;
  letter-spacing: 0;
}
h5, .h5 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-14);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg2);
  margin: 0 0 var(--sp-2) 0;
}
.banner {
  font-family: var(--font-banner);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}
p, .p {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg1);
  margin: 0 0 var(--sp-3) 0;
  text-wrap: pretty;
}
.lede {
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
}
small, .small { font-size: var(--fs-14); color: var(--fg2); }
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cmc-gold-700);
}
code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* Links */
a {
  color: var(--cmc-navy);
  text-decoration-color: var(--cmc-gold);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color var(--t-default) var(--ease);
}
a:hover { color: var(--cmc-navy-600); }

/* Diploma rule — 1px gold underline */
.rule-gold {
  border: 0;
  border-top: 1px solid var(--cmc-gold);
  margin: var(--sp-6) 0;
}

/* ============================================================
   Common UI primitives
   ============================================================ */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-16);
  line-height: 1;
  padding: 12px 20px;
  border-radius: var(--r-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--t-default) var(--ease);
  box-shadow: var(--sh-1);
  text-decoration: none;
}
.btn:active { transform: translateY(0) scale(0.98); box-shadow: var(--sh-1); }
.btn:hover  { transform: translateY(-1px); box-shadow: var(--sh-2); }

.btn-primary {
  background: var(--cmc-navy);
  color: var(--fg-on-navy);
  border-color: var(--cmc-navy);
}
.btn-primary:hover { background: var(--cmc-navy-700); border-color: var(--cmc-navy-700); color:#fff; }

.btn-accent {
  background: var(--cmc-gold);
  color: var(--cmc-navy);
  border-color: var(--cmc-gold);
}
.btn-accent:hover { background: var(--cmc-gold-600); border-color: var(--cmc-gold-600); color: var(--cmc-navy); }

.btn-secondary {
  background: #fff;
  color: var(--cmc-navy);
  border-color: var(--cmc-navy);
}
.btn-secondary:hover { background: var(--cmc-navy-50); color: var(--cmc-navy); }

.btn-ghost {
  background: transparent;
  color: var(--cmc-navy);
  border-color: transparent;
  box-shadow: none;
}
.btn-ghost:hover { background: var(--cmc-navy-50); box-shadow: none; transform: none; }

.btn-sm { padding: 8px 14px; font-size: var(--fs-14); }
.btn-lg { padding: 16px 28px; font-size: var(--fs-18); }

/* Inputs */
.input, .textarea, .select {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-16);
  color: var(--fg1);
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 10px 14px;
  box-shadow: var(--sh-inset);
  transition: border-color var(--t-default) var(--ease), box-shadow var(--t-default) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--fg3); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--cmc-navy);
  box-shadow: 0 0 0 3px rgba(9,30,75,0.12);
}
.label {
  display: block;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--fg2);
  margin-bottom: var(--sp-2);
}

/* Cards */
.card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: var(--sp-6);
  transition: box-shadow var(--t-default) var(--ease), transform var(--t-default) var(--ease);
}
.card-hover:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.card-parchment { background: var(--parchment); border-color: var(--cmc-gold); }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-12);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--cmc-navy-100);
  color: var(--cmc-navy);
  letter-spacing: 0.02em;
}
.badge-gold    { background: var(--cmc-gold-100);  color: var(--cmc-gold-700); }
.badge-green   { background: var(--cmc-green-100); color: var(--cmc-green); }
.badge-red     { background: var(--cmc-red-100);   color: var(--cmc-red); }
.badge-outline { background: transparent; border: 1px solid var(--cmc-navy); color: var(--cmc-navy); }

/* Header / Nav */
.header {
  height: var(--header-h);
  background: var(--cmc-navy);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 var(--sp-6);
  border-bottom: 3px solid var(--cmc-gold);
}
.header a { color: #fff; text-decoration: none; }

/* Container */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-6); }

/* Utility */
.stack > * + * { margin-top: var(--sp-3); }
.row { display: flex; gap: var(--sp-4); align-items: center; }
.muted { color: var(--fg2); }
.center { text-align: center; }