/* ============================================================
   MONTESSORI DIEPPE — Colors & Type
   « Une école qui cultive le goût naturel d'apprendre des enfants. »
   Bilingual (FR/EN) · Prématernelle à l'élémentaire · Dieppe, NB

   This is the ONLY file in the app where a brand value is written.
   Everything else consumes these custom properties. If the school's
   brand guide disagrees with a value here, change it here and nowhere
   else.

   Structure mirrors the Foulem design-system export this app was
   ported from, so the ported `src/styles/app.css` reads the same token
   names it always did.
   ============================================================ */

/* ---- Typefaces ----
   Two families, unlike Foulem's single Red Hat Display:
   a display serif for headings, navigation and buttons, and a humanist
   sans for body copy. Both are self-hosted through @fontsource and
   imported in `src/main.tsx`, so there is no network font request and
   no @font-face block to keep in sync here.

   Identified from the school's website; if the real families turn out
   to differ, swapping them is two lines here plus the imports. */

:root {
  /* ----------------------------------------------------------
     COLOR — base tokens

     The three brand colors are exact: they are the only three fills
     in the official lockup, `public/assets/montessori-logo-colour.svg`.
     ---------------------------------------------------------- */
  --mon-navy:        #205882;  /* PRIMARY — shield field, DIEPPE, bands */
  --mon-navy-deep:   #1A4668;  /* press/hover — darkened primary */
  --mon-gold:        #C99920;  /* ACCENT — primary CTA, banner fold, rules */
  --mon-gold-light:  #E2BB4D;  /* wordmark, the M, CTAs over photography */

  /* Semantic brand aliases. The app refers to these, never to the
     `--mon-*` names above, so a rebrand is a change of four lines. */
  --brand:         var(--mon-navy);
  --brand-deep:    var(--mon-navy-deep);
  --brand-accent:  var(--mon-gold);
  --brand-accent-light: var(--mon-gold-light);

  --black:    #000000;
  --ink:      #2E2E2E;  /* body copy, from the site */
  --gray-700: #55606B;  /* secondary body text — navy-leaning gray */
  --gray-500: #8A929B;  /* muted text, captions */
  --gray-300: #DDE1E5;  /* borders, dividers */
  --gray-100: #F1F1EF;  /* off-white surface, from the site's footer */
  --white:    #FFFFFF;

  /* ----------------------------------------------------------
     COLOR — semantic (light surfaces, the default)
     ---------------------------------------------------------- */
  --bg:            var(--white);
  --surface:       var(--gray-100);
  --surface-line:  var(--gray-300);
  --fg:            var(--ink);
  --fg-2:          var(--gray-700);
  --fg-muted:      var(--gray-500);
  --accent:        var(--brand);
  --accent-press:  var(--brand-deep);
  --on-accent:     var(--white);
  --focus-ring:    var(--brand);

  /* ----------------------------------------------------------
     TYPE — families
     ---------------------------------------------------------- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Mulish', system-ui, -apple-system, sans-serif;

  --w-light:300;
  --w-regular:400;
  --w-medium:500;
  --w-semibold:600;
  --w-bold:700;
  --w-extrabold:800;
  --w-black:900;

  /* ----------------------------------------------------------
     TYPE — scale (semantic)

     Kept identical to the Foulem scale so the ported layout holds its
     rhythm. The serif reads larger than Red Hat Display at the same
     size, which the school's own site leans into.
     ---------------------------------------------------------- */
  --display:    clamp(44px, 6.2vw, 88px);
  --h1:         clamp(32px, 4.2vw, 52px);
  --h2:         clamp(26px, 2.9vw, 36px);
  --h3:         24px;
  --h4:         20px;
  --body-lg:    18px;
  --body:       16px;
  --body-sm:    14px;
  --caption:    12px;
  --overline:   12px;

  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-body:    1.6;

  /* ----------------------------------------------------------
     SPACING · RADIUS · ELEVATION

     The school's site uses square-cornered buttons and full-bleed
     color bands, so Foulem's square-by-default shape language carries
     over unchanged.
     ---------------------------------------------------------- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;

  --radius-0:0px;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-pill:999px;

  --shadow-sm: 0 1px 2px rgba(32,88,130,.07), 0 1px 3px rgba(32,88,130,.10);
  --shadow-md: 0 4px 12px rgba(32,88,130,.10), 0 2px 4px rgba(32,88,130,.06);
  --shadow-lg: 0 18px 40px rgba(32,88,130,.16);

  --ease: cubic-bezier(.2,.7,.2,1);
  --dur:  180ms;
}

/* ---- Navy surface — the school's signature full-bleed band ----
   Foulem's inverse was `.on-red`; this is the same idea in navy, and
   is what the site does between every white section. Gold is the
   accent that survives the inversion. */
.on-brand {
  --bg:           var(--mon-navy);
  --surface:      var(--mon-navy-deep);
  --surface-line: rgba(255,255,255,.20);
  --fg:           var(--white);
  --fg-2:         rgba(255,255,255,.86);
  --fg-muted:     rgba(255,255,255,.58);
  --accent:       var(--mon-gold-light);
  --accent-press: var(--mon-gold);
  --on-accent:    var(--mon-navy);
  background: var(--mon-navy);
  color: var(--white);
}

/* ============================================================
   SEMANTIC TYPE CLASSES

   Headings, navigation and buttons take the display serif; body copy
   takes the sans. That division is the school's, not an invention —
   its nav links and CTA labels are set in the serif.
   ============================================================ */
.t-display { font-family:var(--font-display); font-weight:var(--w-bold);
  font-size:var(--display); line-height:var(--lh-tight); letter-spacing:-.015em; }
.t-h1 { font-family:var(--font-display); font-weight:var(--w-bold);
  font-size:var(--h1); line-height:var(--lh-snug); letter-spacing:-.01em; }
.t-h2 { font-family:var(--font-display); font-weight:var(--w-regular);
  font-size:var(--h2); line-height:var(--lh-snug); }
.t-h3 { font-family:var(--font-display); font-weight:var(--w-semibold);
  font-size:var(--h3); line-height:1.25; }
.t-h4 { font-family:var(--font-display); font-weight:var(--w-semibold);
  font-size:var(--h4); line-height:1.3; }
.t-body-lg { font-family:var(--font-body); font-weight:var(--w-regular);
  font-size:var(--body-lg); line-height:var(--lh-body); }
.t-body { font-family:var(--font-body); font-weight:var(--w-regular);
  font-size:var(--body); line-height:var(--lh-body); }
.t-body-sm { font-family:var(--font-body); font-weight:var(--w-regular);
  font-size:var(--body-sm); line-height:1.5; }
.t-caption { font-family:var(--font-body); font-weight:var(--w-medium);
  font-size:var(--caption); line-height:1.4; color:var(--fg-muted); }
.t-overline { font-family:var(--font-body); font-weight:var(--w-bold);
  font-size:var(--overline); line-height:1; letter-spacing:.14em;
  text-transform:uppercase; }

/* The school's emphasis voice: an italic serif phrase inside an
   upright serif heading — « Une école qui cultive *le goût naturel
   d'apprendre des enfants.* » */
.t-emphasis { font-family:var(--font-display); font-style:italic;
  font-weight:var(--w-regular); }

/* Carried from Foulem so ported markup keeps working. Both are serif
   here; the school has no all-caps display voice. */
.t-callout-light { font-family:var(--font-display); font-weight:var(--w-light);
  line-height:1.1; }
.t-callout-bold  { font-family:var(--font-display); font-weight:var(--w-bold);
  line-height:1.1; }