/* =========================================================================
   Karen Hamou Consulting — Design Foundations
   Colors, type, spacing, radii, shadows
   ========================================================================= */

/* ---- Fonts ----------------------------------------------------------------
   PRIMARY DISPLAY:  Scrosiet (Maulana Creative)        → LOCAL
   SUPPORTING:       Switzer (Indian Type Foundry)      → LOCAL (full family)
   BODY SERIF:       Signifier Regular (Klim Type Foundry) → LOCAL
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Scrosiet';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Scrosiet.woff') format('woff'),
       url('fonts/Scrosiet.otf')  format('opentype'),
       url('fonts/Scrosiet.ttf')  format('truetype');
}

@font-face {
  font-family: 'Signifier';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/signifier-regular.woff2') format('woff2');
}

/* Switzer — variable fonts cover full weight range (woff2 → woff → ttf) */
@font-face {
  font-family: 'Switzer';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Switzer-Variable.woff2') format('woff2-variations'),
       url('fonts/Switzer-Variable.woff2') format('woff2'),
       url('fonts/Switzer-Variable.woff')  format('woff-variations'),
       url('fonts/Switzer-Variable.woff')  format('woff'),
       url('fonts/Switzer-Variable.ttf')   format('truetype-variations'),
       url('fonts/Switzer-Variable.ttf')   format('truetype');
}
@font-face {
  font-family: 'Switzer';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Switzer-VariableItalic.woff2') format('woff2-variations'),
       url('fonts/Switzer-VariableItalic.woff2') format('woff2'),
       url('fonts/Switzer-VariableItalic.woff')  format('woff-variations'),
       url('fonts/Switzer-VariableItalic.woff')  format('woff'),
       url('fonts/Switzer-VariableItalic.ttf')   format('truetype-variations'),
       url('fonts/Switzer-VariableItalic.ttf')   format('truetype');
}

/* Static fallbacks (woff2 → woff → ttf) — used only if variable fails */
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/Switzer-Thin.woff2') format('woff2'), url('fonts/Switzer-Thin.woff') format('woff'), url('fonts/Switzer-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Switzer'; font-style: italic; font-weight: 100; font-display: swap; src: url('fonts/Switzer-ThinItalic.woff2') format('woff2'), url('fonts/Switzer-ThinItalic.woff') format('woff'), url('fonts/Switzer-ThinItalic.ttf') format('truetype'); }
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/Switzer-Extralight.woff2') format('woff2'), url('fonts/Switzer-Extralight.woff') format('woff'), url('fonts/Switzer-Extralight.ttf') format('truetype'); }
@font-face { font-family: 'Switzer'; font-style: italic; font-weight: 200; font-display: swap; src: url('fonts/Switzer-ExtralightItalic.woff2') format('woff2'), url('fonts/Switzer-ExtralightItalic.woff') format('woff'), url('fonts/Switzer-ExtralightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Switzer-Light.woff2') format('woff2'), url('fonts/Switzer-Light.woff') format('woff'), url('fonts/Switzer-Light.ttf') format('truetype'); }
@font-face { font-family: 'Switzer'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/Switzer-LightItalic.woff2') format('woff2'), url('fonts/Switzer-LightItalic.woff') format('woff'), url('fonts/Switzer-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Switzer-Regular.woff2') format('woff2'), url('fonts/Switzer-Regular.woff') format('woff'), url('fonts/Switzer-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Switzer'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/Switzer-Italic.woff2') format('woff2'), url('fonts/Switzer-Italic.woff') format('woff'), url('fonts/Switzer-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Switzer-Medium.woff2') format('woff2'), url('fonts/Switzer-Medium.woff') format('woff'), url('fonts/Switzer-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Switzer'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/Switzer-MediumItalic.woff2') format('woff2'), url('fonts/Switzer-MediumItalic.woff') format('woff'), url('fonts/Switzer-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Switzer-Semibold.woff2') format('woff2'), url('fonts/Switzer-Semibold.woff') format('woff'), url('fonts/Switzer-Semibold.ttf') format('truetype'); }
@font-face { font-family: 'Switzer'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/Switzer-SemiboldItalic.woff2') format('woff2'), url('fonts/Switzer-SemiboldItalic.woff') format('woff'), url('fonts/Switzer-SemiboldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Switzer-Bold.woff2') format('woff2'), url('fonts/Switzer-Bold.woff') format('woff'), url('fonts/Switzer-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Switzer'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/Switzer-BoldItalic.woff2') format('woff2'), url('fonts/Switzer-BoldItalic.woff') format('woff'), url('fonts/Switzer-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/Switzer-Extrabold.woff2') format('woff2'), url('fonts/Switzer-Extrabold.woff') format('woff'), url('fonts/Switzer-Extrabold.ttf') format('truetype'); }
@font-face { font-family: 'Switzer'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/Switzer-ExtraboldItalic.woff2') format('woff2'), url('fonts/Switzer-ExtraboldItalic.woff') format('woff'), url('fonts/Switzer-ExtraboldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/Switzer-Black.woff2') format('woff2'), url('fonts/Switzer-Black.woff') format('woff'), url('fonts/Switzer-Black.ttf') format('truetype'); }
@font-face { font-family: 'Switzer'; font-style: italic; font-weight: 900; font-display: swap; src: url('fonts/Switzer-BlackItalic.woff2') format('woff2'), url('fonts/Switzer-BlackItalic.woff') format('woff'), url('fonts/Switzer-BlackItalic.ttf') format('truetype'); }

:root {
  /* ------------------------------------------------------------------------
     COLOR PALETTE — per brand guidelines (page 7)
     "Dark, neutral, editorial. Serious, credible, deep."
     ------------------------------------------------------------------------ */

  /* Core */
  --kh-carbon:      #1D1D1D;   /* Carbon Black  — primary ink, dark sections */
  --kh-mahogany:    #2C1405;   /* Smoked Mahogany — accent dark, deep warm */
  --kh-white:       #FFFFFF;   /* White — primary surface */
  --kh-clay:        #ECD9C5;   /* Natural Clay — warm neutral, hero panels */
  --kh-porcelain:   #F6F6F6;   /* Porcelain — secondary surface, hairline divisions */

  /* Tints + shades, derived for UI states (not in brand book — use sparingly) */
  --kh-carbon-90:   #2A2A2A;
  --kh-carbon-70:   #525252;
  --kh-carbon-50:   #7E7E7E;
  --kh-carbon-30:   #B5B5B5;
  --kh-carbon-15:   #DCDCDC;
  --kh-clay-soft:   #F5EBDE;
  --kh-clay-deep:   #D9C2A8;

  /* Semantic — fg / bg / borders */
  --fg-1:           var(--kh-carbon);          /* primary text */
  --fg-2:           var(--kh-carbon-70);       /* secondary text */
  --fg-3:           var(--kh-carbon-50);       /* meta, captions */
  --fg-on-dark:     var(--kh-white);
  --fg-on-clay:     var(--kh-carbon);

  --bg-1:           var(--kh-white);           /* primary surface */
  --bg-2:           var(--kh-porcelain);       /* secondary surface */
  --bg-3:           var(--kh-clay);            /* warm panel */
  --bg-dark:        var(--kh-carbon);          /* inverted */
  --bg-dark-2:      var(--kh-mahogany);        /* inverted accent */

  --border-hairline: rgba(29, 29, 29, 0.10);
  --border-rule:     rgba(29, 29, 29, 0.18);
  --border-on-dark:  rgba(255, 255, 255, 0.16);

  /* School application status — muted, on-brand semantic palette */
  --sch-notstarted:  #7a8fa6;
  --sch-inprogress:  #c49a3c;
  --sch-completed:   #4a9068;
  --sch-interview:   #4a72a8;
  --sch-waitlisted:  #4060a0;
  --sch-admitted:    #2e7d55;
  --sch-denied-pre:  #b84c30;
  --sch-denied-post: #c07830;

  /* ------------------------------------------------------------------------
     TYPOGRAPHY
     Hierarchy from brand book (page 12):
       TITLE   — Scrosiet Regular              (display, uppercase)
       HEADER  — Switzer Medium                (sub-headings)
       BODY    — Signifier Regular             (serif body copy)
       CAPTION — Switzer Regular UPPERCASE     (labels, eyebrows, nav)
     ------------------------------------------------------------------------ */

  --font-display:  "Scrosiet", "Antonio", "Big Shoulders Display", "Oswald", sans-serif;
  --font-sans:     "Switzer", "Inter", system-ui, -apple-system, sans-serif;
  --font-serif:    "Signifier", "Source Serif 4", "Source Serif Pro", Georgia, serif;

  /* Type scale — editorial, generous */
  --fs-display-xl: clamp(64px, 9vw, 132px);
  --fs-display-l:  clamp(48px, 6.5vw, 96px);
  --fs-display-m:  clamp(36px, 4.5vw, 64px);
  --fs-display-s:  clamp(28px, 3.2vw, 44px);

  --fs-header-l:   28px;
  --fs-header-m:   22px;
  --fs-header-s:   18px;

  --fs-body-l:     20px;
  --fs-body-m:     17px;
  --fs-body-s:     15px;

  --fs-caption:    12px;   /* tracked, uppercase */
  --fs-caption-l:  14px;

  --lh-tight:      1.02;   /* display */
  --lh-snug:       1.18;   /* headers */
  --lh-body:       1.55;   /* body serif */
  --lh-loose:      1.7;    /* long-form body */

  --ls-display:    -0.005em;
  --ls-caption:    0.18em; /* generous tracking for ALL-CAPS labels */
  --ls-eyebrow:    0.24em;

  /* ------------------------------------------------------------------------
     SPACING — 4 / 8 grid, with editorial extras
     ------------------------------------------------------------------------ */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10:  128px;
  --sp-11:  160px;

  /* ------------------------------------------------------------------------
     RADII — restrained. Mostly square; pills for CTAs only.
     ------------------------------------------------------------------------ */
  --r-0:   0px;          /* default — square corners are the brand voice */
  --r-1:   2px;
  --r-2:   4px;
  --r-pill: 999px;       /* "Request a Consultation" capsule button */

  /* ------------------------------------------------------------------------
     ELEVATION — minimal. Editorial brands don't lean on shadows.
     ------------------------------------------------------------------------ */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(29, 29, 29, 0.04);
  --shadow-2: 0 8px 24px rgba(29, 29, 29, 0.06);
  --shadow-3: 0 24px 60px rgba(29, 29, 29, 0.10);

  /* ------------------------------------------------------------------------
     MOTION — slow, considered, never bouncy.
     ------------------------------------------------------------------------ */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    160ms;
  --dur-base:    260ms;
  --dur-slow:    520ms;

  /* Layout */
  --container:     1280px;
  --container-narrow: 880px;
  --gutter:        clamp(20px, 4vw, 64px);
}

/* =========================================================================
   Semantic typography classes — use these everywhere instead of raw sizes
   ========================================================================= */

.kh-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display-l);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--fg-1);
}
.kh-title--xl { font-size: var(--fs-display-xl); }
.kh-title--m  { font-size: var(--fs-display-m); }
.kh-title--s  { font-size: var(--fs-display-s); }

.kh-header {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-header-m);
  line-height: var(--lh-snug);
  letter-spacing: 0;
  color: var(--fg-1);
}
.kh-header--l { font-size: var(--fs-header-l); }
.kh-header--s { font-size: var(--fs-header-s); }

.kh-body {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-body-m);
  line-height: var(--lh-body);
  color: var(--fg-1);
}
.kh-body--l    { font-size: var(--fs-body-l); line-height: var(--lh-loose); }
.kh-body--s    { font-size: var(--fs-body-s); }
.kh-body em,
.kh-body i     { font-style: italic; }

.kh-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-caption);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--ls-caption);
  color: var(--fg-2);
}
.kh-caption--l { font-size: var(--fs-caption-l); }

.kh-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--fg-2);
}

/* Inverted variants for dark sections */
.kh-on-dark               { color: var(--fg-on-dark); }
.kh-on-dark .kh-title,
.kh-on-dark .kh-header,
.kh-on-dark .kh-body      { color: var(--fg-on-dark); }
.kh-on-dark .kh-caption,
.kh-on-dark .kh-eyebrow   { color: rgba(255, 255, 255, 0.72); }