/* ==========================================================================
   Master Irvin's House of Discipline — Design tokens
   Everything Jay needs for the design pass lives in this file.
   Change a value here and it changes everywhere.
   ========================================================================== */

:root {
  /* ---- Brand color ------------------------------------------------------
     Pulled from the school: black uniforms/shirts, red carpet floor,
     gold trim, Korean flag red + blue.                                    */
  --c-ink:        #0B0B0C;   /* near-black, primary surface            */
  --c-ink-2:      #141417;   /* raised black panel                     */
  --c-ink-3:      #1E1E23;   /* hairline / border on dark              */

  --c-red:        #CD2E3A;   /* Korean flag red — primary accent        */
  --c-red-deep:   #96131D;   /* pressed / shadowed red                  */
  /* Brand red is mid-luminance: as TYPE over a photo it measures ~2.4:1, under
     the 3:1 large-text minimum, and the only way to rescue it is a near-black
     backing. This lighter red keeps the colour and clears the threshold. */
  --c-red-bright: #FF4D57;
  --c-blue:       #0A4A9E;   /* Korean flag blue — secondary accent     */

  --c-gold:       #C9A227;   /* belt trim gold — credibility marks      */
  --c-gold-soft:  #E3C767;

  --c-bone:       #F8F8F6;   /* near-neutral off-white                  */
  --c-bone-2:     #EFEEEA;
  /* One clear step down from bone-2 (1.15:1 against it). The programs grid
     sits directly under the welcome band, which is bone-2 — without this
     they read as one continuous block. */
  --c-bone-3:     #E2DFD6;
  --c-slate:      #63635E;   /* muted body text on light; keeps ~5:1 on both
                                  the base and the alt surface              */

  /* ---- Semantic ---------------------------------------------------------*/
  --bg:            var(--c-bone);
  --bg-alt:        var(--c-bone-2);
  --bg-alt-2:      var(--c-bone-3);
  --bg-dark:       var(--c-ink);
  --bg-dark-alt:   var(--c-ink-2);

  --text:          var(--c-ink);
  --text-muted:    var(--c-slate);
  --text-on-dark:  var(--c-bone);
  --text-on-dark-muted: #B3ADA2;

  --accent:        var(--c-red);
  --accent-hover:  var(--c-red-deep);
  /* Red as small TYPE on a light surface: --c-red measures 4.47:1 there,
     just under the 4.5:1 minimum. This one clears it at 7.5:1. */
  --accent-ink:    var(--c-red-deep);
  --rule:          rgba(11, 11, 12, .11);
  --rule-on-dark:  rgba(245, 241, 232, .18);

  /* ---- Type -------------------------------------------------------------*/
  --font-display: "Archivo Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Archivo Black ships one weight and it is already black. Asking for 600/700
     makes the browser synthesise a fake bold, which smears the letterforms. */
  --font-display-weight: 400;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui:      "Oswald", system-ui, -apple-system, sans-serif;
  /* Hangul has no coverage in Oswald — 태권도 needs a CJK-capable face. */
  --font-hangul:  "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Nanum Gothic", sans-serif;

  --fs-eyebrow:  clamp(.72rem, .68rem + .2vw, .82rem);
  --fs-body:     clamp(1.02rem, .97rem + .3vw, 1.18rem);
  --fs-lead:     clamp(1.16rem, 1.05rem + .6vw, 1.42rem);
  --fs-h3:       clamp(1.28rem, 1.1rem + .9vw, 1.7rem);
  --fs-h2:       clamp(1.75rem, 1.35rem + 1.9vw, 2.9rem);
  --fs-h1:       clamp(2.35rem, 1.6rem + 3.6vw, 4.6rem);
  --fs-display:  clamp(3rem, 1.8rem + 5.6vw, 6.5rem);

  --lh-tight: 1.04;
  --lh-head:  1.12;
  --lh-body:  1.72;
  --track-wide: .1em;    /* eyebrows, buttons, nav */

  /* ---- Space ------------------------------------------------------------*/
  --sp-1: .35rem;
  --sp-2: .7rem;
  --sp-3: 1.1rem;
  --sp-4: 1.6rem;
  --sp-5: 2.6rem;
  --sp-6: 4rem;
  --sp-7: 5.5rem;
  --sp-8: 7rem;

  --section-y: clamp(4.4rem, 2.6rem + 6vw, 9rem);
  --gutter:    clamp(1.15rem, .6rem + 2.4vw, 2.5rem);
  --measure:   62ch;
  --maxw:      1200px;
  --maxw-narrow: 820px;

  /* ---- Shape ------------------------------------------------------------*/
  --radius:    4px;
  --radius-lg: 6px;
  --border-strong: 3px solid var(--c-ink);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.18);
  --shadow-md: 0 10px 28px rgba(0,0,0,.16);
  --shadow-dark: 0 18px 44px rgba(0,0,0,.55);

  /* ---- Motion -----------------------------------------------------------*/
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:  .22s;

  /* ---- Layout chrome ----------------------------------------------------*/
  /* Must track the real rendered header height: the banners and the anchor
     scroll-margin are both offset by it. Driven by the badge (84px on desktop)
     plus the lockup's own padding; at 104px the lockup filled the bar edge to
     edge with no breathing room. */
  --header-h: 124px;
  --callbar-h: 62px;   /* mobile sticky tap-to-call */
  /* Inset around the hero and page banners. 0 = full bleed, edge to edge.
     Set it back to something like clamp(10px, 1vw, 18px) to get the framed,
     card-on-a-page look back — the header insets with it. */
  --frame: 0px;

  /* Hero / page banner height. Not full screen: the reference sits at roughly
     three quarters, which shows the photograph without making every visitor
     scroll a whole viewport before any content. */
  /* How far the welcome photo's cut-out figures rise above the band's top
     edge and into the hero. Desktop only. */
  --feature-break: clamp(56px, 6.5vw, 104px);
  --hero-h: 72svh;

  /* Flat wash over the hero photo. 0 = the room's own colour comes through,
     which is what makes the hero feel welcoming rather than moody. Raise it
     toward .3 for a darker, more cinematic hero. */
  --hero-wash: 62, 64, 70;           /* neutral grey, as an rgb triplet */
  --hero-wash-alpha: 0;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: .001s; }
}