/* =====================================================================
   Zomra teaching design system, v1.0
   The approachable, classroom version of the Mostafa Zaher brand.

   Same bones as the personal brand (crimson signature, engineering blue,
   warm parchment field, serif voice). Dialed toward warmth and
   approachability for a live, mid-career teaching course:
   - Slate Teal promoted from a chart color to a friendly co-accent
   - Parchment is the default field, not stark white
   - Rounder corners, softer shadows, more air
   - Bigger body text and looser line height for reading comfort

   Drop this file in and use the custom properties. Pair with the
   Google Fonts: Source Serif 4, Inter, JetBrains Mono.
   ===================================================================== */

:root {
  /* ---- Brand anchors (unchanged from the personal brand) ---- */
  --c-crimson:        #8C1A2B;  /* primary signature, key accents, the one number that matters */
  --c-crimson-deep:   #6E1422;  /* pressed / text-on-light when crimson needs more contrast */
  --c-blue:           #003A70;  /* engineering accent, links, "the system" */
  --c-gold:           #B89149;  /* rare. thin rules, award lines. never body text */

  /* ---- Friendly co-accent (promoted from the brand's chart palette) ---- */
  --c-teal:           #3E7C7B;  /* the approachable color: activities, "your turn", progress */
  --c-teal-deep:      #2C5C5B;  /* teal for text and links on light backgrounds (passes AA) */

  /* ---- Neutrals and field ---- */
  --c-ink:            #1C1B1A;  /* body text, dark fields */
  --c-ink-soft:       #3A3937;  /* secondary text */
  --c-silver:         #8A8B8C;  /* captions, meta, muted labels */
  --c-line:           #C2C0BF;  /* borders, dividers */
  --c-line-warm:      #DED7C8;  /* warm divider on parchment */
  --c-parchment:      #F5F2EC;  /* default page field, warm */
  --c-parchment-deep: #EAE4D7;  /* alternating band on parchment */
  --c-white:          #FFFFFF;  /* cards, raised surfaces */

  /* ---- Soft tints for callouts and zones (derived from brand ramps) ---- */
  --c-crimson-soft:   #F6E0DF;  /* "try this" / highlight fill */
  --c-blue-soft:      #E3ECF5;  /* "reflect" fill */
  --c-teal-soft:      #E7F1F0;  /* "activity / your turn" fill */
  --c-gold-soft:      #F6EEDC;  /* "watch out" fill */
  --c-gold-text:      #6B5420;  /* readable gold-family text on light */

  /* ---- Semantic aliases ---- */
  --bg:               var(--c-parchment);
  --bg-band:          var(--c-parchment-deep);
  --surface:          var(--c-white);
  --text:             var(--c-ink);
  --text-muted:       var(--c-silver);
  --link:             var(--c-blue);
  --accent:           var(--c-crimson);
  --accent-friendly:  var(--c-teal);
  --border:           var(--c-line);

  /* ---- Type families ---- */
  --font-voice:  'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-system: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-proof:  'JetBrains Mono', 'IBM Plex Mono', 'Space Mono', ui-monospace, monospace;

  /* ---- Type scale ----
     Base 18px for classroom reading comfort. Ratio 1.2 (minor third),
     gentler than the brand's 1.25 so the jumps feel friendly, not grand. */
  --fs-display: 3.25rem;   /* 58.5px  module / week title */
  --fs-h1:      2.6rem;    /* 46.8px  page title */
  --fs-h2:      2rem;      /* 36px    section */
  --fs-h3:      1.5rem;    /* 27px    subsection */
  --fs-h4:      1.25rem;   /* 22.5px  card / UI header */
  --fs-lead:    1.222rem;  /* 22px    lead paragraph */
  --fs-body:    1rem;      /* 18px    default body (base) */
  --fs-small:   0.833rem;  /* 15px    caption */
  --fs-label:   0.722rem;  /* 13px    uppercase label */
  --fs-mono:    0.889rem;  /* 16px    metrics, code */

  --lh-body:    1.6;       /* roomy for reading */
  --lh-tight:   1.18;      /* display and headings */

  /* ---- Space scale (8px base) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* ---- Shape: rounder than the brand, softer shadows = friendlier ---- */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(28,27,26,.06);
  --shadow:    0 4px 16px rgba(28,27,26,.08);
  --shadow-lg: 0 12px 32px rgba(28,27,26,.10);

  --ring-accent: 0 0 0 3px rgba(140,26,43,.18);
  --ring-teal:   0 0 0 3px rgba(62,124,123,.20);
}

/* =====================================================================
   Base elements
   ===================================================================== */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-system);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-voice); line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--text); }
h1 { font-size: var(--fs-h1); font-weight: 600; }
h2 { font-size: var(--fs-h2); font-weight: 600; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-family: var(--font-system); font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.01em; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--c-crimson); }

code, kbd, .mono { font-family: var(--font-proof); font-size: var(--fs-mono); }

.lead { font-size: var(--fs-lead); color: var(--c-ink-soft); }
.muted { color: var(--text-muted); }

/* Eyebrow / kicker, the uppercase locator from the wordmark system */
.eyebrow {
  font-family: var(--font-system);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-teal-deep);
}

/* =====================================================================
   Components
   ===================================================================== */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-system); font-weight: 600; font-size: 1rem;
  padding: 12px 22px; border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--c-crimson); color: #fff; }
.btn-primary:hover { background: var(--c-crimson-deep); color: #fff; box-shadow: var(--shadow); }
.btn-friendly { background: var(--c-teal); color: #fff; }
.btn-friendly:hover { background: var(--c-teal-deep); color: #fff; box-shadow: var(--shadow); }
.btn-ghost { background: transparent; color: var(--c-crimson); border-color: var(--c-line); }
.btn-ghost:hover { border-color: var(--c-crimson); box-shadow: var(--ring-accent); }

/* Pills / chips / tags */
.pill {
  display: inline-block; padding: 5px 14px; border-radius: var(--radius-pill);
  font-family: var(--font-system); font-size: var(--fs-small); font-weight: 600;
}
.pill-crimson { background: var(--c-crimson-soft); color: var(--c-crimson-deep); }
.pill-teal    { background: var(--c-teal-soft);    color: var(--c-teal-deep); }
.pill-blue    { background: var(--c-blue-soft);    color: var(--c-blue); }
.pill-gold    { background: var(--c-gold-soft);    color: var(--c-gold-text); }

/* Step badge (numbered) */
.step-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--radius-pill);
  background: var(--c-teal); color: #fff; font-weight: 700; font-size: 0.9rem;
  font-family: var(--font-system); flex: none;
}

/* Card */
.card {
  background: var(--surface); border-radius: var(--radius);
  border: 1px solid var(--c-line-warm); box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
}
.card-accent { border-top: 4px solid var(--c-crimson); }
.card-accent-teal { border-top: 4px solid var(--c-teal); }

/* Callouts: the teaching workhorse. Four moods, soft and friendly. */
.callout {
  border-radius: var(--radius); padding: var(--sp-4) var(--sp-5);
  border-left: 5px solid; display: flex; gap: var(--sp-3); align-items: flex-start;
}
.callout .callout-tag {
  font-family: var(--font-system); font-weight: 700; font-size: var(--fs-label);
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.callout-try    { background: var(--c-teal-soft);    border-color: var(--c-teal); }
.callout-try    .callout-tag { color: var(--c-teal-deep); }
.callout-tip    { background: var(--c-blue-soft);    border-color: var(--c-blue); }
.callout-tip    .callout-tag { color: var(--c-blue); }
.callout-watch  { background: var(--c-gold-soft);    border-color: var(--c-gold); }
.callout-watch  .callout-tag { color: var(--c-gold-text); }
.callout-reflect{ background: var(--c-crimson-soft); border-color: var(--c-crimson); }
.callout-reflect .callout-tag { color: var(--c-crimson-deep); }

/* Metric, in the proof typeface */
.metric { font-family: var(--font-proof); font-weight: 500; color: var(--c-crimson); }
.metric-num { font-size: 2.4rem; line-height: 1; }
.metric-label { font-family: var(--font-system); font-size: var(--fs-small); color: var(--text-muted); }

/* Divider */
.rule { height: 1px; background: var(--c-line-warm); border: 0; margin: var(--sp-5) 0; }
.rule-crimson { height: 2px; background: var(--c-crimson); border: 0; width: 56px; }
.rule-gold { height: 2px; background: var(--c-gold); border: 0; width: 56px; }