/* =========================================================================
   KAPLA MTL — COLORS & TYPE
   Foundations CSS for the Centre Kapla Montréal brand system.
   ========================================================================= */

/* ---------- FONTS -------------------------------------------------------- */
/* Coolvetica is the brand display family (Larabie Fonts). Use HV COMP for
   monumental titles, RG for general display, and Cond/Cram for compact tags. */

@font-face {
  font-family: "Coolvetica";
  src: url("fonts/Coolvetica-Rg.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Coolvetica";
  src: url("fonts/Coolvetica-Rg-It.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Coolvetica Cond";
  src: url("fonts/Coolvetica-Rg-Cond.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Coolvetica Cram";
  src: url("fonts/Coolvetica-Rg-Cram.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Coolvetica Heavy";
  src: url("fonts/Coolvetica-Hv-Comp.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Body pairing: Nunito — friendly, rounded, French-language friendly, free.
   Loaded from Google Fonts in the page where needed. */

:root {
  /* =====================================================================
     COLOR SYSTEM
     The KAPLA palette is rooted in the original printed box: a wooden ground
     with four primary "plank" colors painted across it. Add Quebec snow/sky
     and rich charcoal for grounding text.
     ===================================================================== */

  /* Brand primaries — the KAPLA box colors */
  --kapla-red:      #D63A2F;  /* signature plank red — CTAs, marks, accents */
  --kapla-red-deep: #A92823;  /* hover/pressed red */
  --kapla-blue:     #1E3A66;  /* deep navy — logotype, headlines, ink */
  --kapla-blue-mid: #2E5DAA;  /* secondary action blue */
  --kapla-green:    #4F8A3F;  /* grass/forest green — used on play mats */
  --kapla-green-deep:#36652B;
  --kapla-yellow:   #F2B731;  /* warm pine yellow — highlights, "fun" tag */
  --kapla-yellow-soft:#F6CE6B;

  /* Wood tones — KAPLA is pine, this is the texture & warmth of the brand */
  --pine-light:     #F1DCB1;  /* lightest plank face */
  --pine:           #E5C387;  /* mid pine */
  --pine-shadow:    #B98C4E;  /* edge / shadow */
  --pine-dark:      #7A4F22;  /* deep grain */

  /* Neutrals */
  --paper:          #FBF7EE;  /* off-white background — warm, like sanded pine */
  --paper-2:        #F4ECD8;  /* secondary surface */
  --paper-3:        #E9DCBF;  /* tertiary / dividers on wood */
  --snow:           #FFFFFF;
  --ink:            #1B1A17;  /* near-black with warm cast */
  --ink-2:          #3D3A33;  /* secondary text */
  --ink-3:          #6E665A;  /* tertiary text */
  --ink-line:       rgba(27, 26, 23, 0.12);

  /* Semantic — minimal, family-friendly */
  --success:        var(--kapla-green);
  --warning:        var(--kapla-yellow);
  --danger:         var(--kapla-red);
  --info:           var(--kapla-blue-mid);

  /* Foreground / background semantic tokens */
  --bg-app:         var(--paper);
  --bg-surface:     var(--snow);
  --bg-elevated:    var(--snow);
  --bg-wood:        var(--pine);
  --bg-mat-red:     var(--kapla-red);
  --bg-mat-blue:    var(--kapla-blue);
  --bg-mat-green:   var(--kapla-green);

  --fg-1:           var(--ink);
  --fg-2:           var(--ink-2);
  --fg-3:           var(--ink-3);
  --fg-on-color:    var(--snow);
  --fg-on-wood:     var(--pine-dark);

  /* =====================================================================
     TYPOGRAPHY SCALE
     Display = Coolvetica (Heavy Comp for monumental sizes, Rg for general).
     Body = Nunito 400/600/700 — round, friendly, bilingual support.
     ===================================================================== */
  --font-display:   "Coolvetica Heavy", "Coolvetica", "Impact", sans-serif;
  --font-display-rg:"Coolvetica", "Helvetica Neue", Arial, sans-serif;
  --font-tag:       "Coolvetica Cond", "Coolvetica", sans-serif;
  --font-body:      "Nunito", "Helvetica Neue", Arial, sans-serif;
  --font-mono:      ui-monospace, "SF Mono", Menlo, monospace;

  /* Sizes — large, generous (display brand) */
  --fs-display-xl:  clamp(64px, 9vw, 144px);
  --fs-display-lg:  clamp(48px, 6vw, 96px);
  --fs-display-md:  clamp(36px, 4.4vw, 64px);
  --fs-h1:          clamp(40px, 4.4vw, 64px);
  --fs-h2:          clamp(28px, 3.2vw, 44px);
  --fs-h3:          22px;
  --fs-h4:          18px;
  --fs-body-lg:     20px;
  --fs-body:        17px;
  --fs-body-sm:     15px;
  --fs-caption:     13px;
  --fs-eyebrow:     12px;

  /* Line heights */
  --lh-tight:       0.92;
  --lh-snug:        1.08;
  --lh-normal:      1.5;
  --lh-loose:       1.65;

  /* Letter spacing */
  --ls-display:     -0.01em;
  --ls-eyebrow:     0.18em;

  /* =====================================================================
     SPACING — 4px base, plank-stack metaphor: a single plank is ~12mm thick.
     Use these tokens for inset, gap, vertical rhythm.
     ===================================================================== */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* =====================================================================
     RADII — generous, friendly. Cards are softly rounded. Pills for tags.
     ===================================================================== */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   36px;
  --r-pill: 999px;

  /* =====================================================================
     ELEVATION — soft, low. The brand is grounded and tactile, not glassy.
     ===================================================================== */
  --shadow-1: 0 1px 2px rgba(27,26,23,0.06), 0 1px 1px rgba(27,26,23,0.04);
  --shadow-2: 0 6px 14px -6px rgba(27,26,23,0.18), 0 2px 4px rgba(27,26,23,0.06);
  --shadow-3: 0 18px 36px -18px rgba(27,26,23,0.28), 0 8px 16px -8px rgba(27,26,23,0.10);
  --shadow-4: 0 32px 64px -24px rgba(27,26,23,0.32);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(27,26,23,0.06);

  /* Borders */
  --border-hair:    1px solid var(--ink-line);
  --border-card:    1px solid rgba(27,26,23,0.08);

  /* Motion */
  --ease-out:       cubic-bezier(.22, 1, .36, 1);
  --ease-spring:    cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast:       150ms;
  --dur-base:       240ms;
  --dur-slow:       420ms;
}

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

.k-eyebrow {
  font-family: var(--font-tag);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--kapla-red);
  font-weight: 400;
}

.k-display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--kapla-blue);
  text-transform: uppercase;
  font-weight: 900;
}
.k-display-lg {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--kapla-blue);
  text-transform: uppercase;
  font-weight: 900;
}
.k-display-md {
  font-family: var(--font-display-rg);
  font-size: var(--fs-display-md);
  line-height: var(--lh-snug);
  color: var(--kapla-blue);
  font-weight: 400;
}

h1, .k-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--kapla-blue);
  text-transform: uppercase;
  font-weight: 900;
  margin: 0;
}
h2, .k-h2 {
  font-family: var(--font-display-rg);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--kapla-blue);
  font-weight: 400;
  margin: 0;
}
h3, .k-h3 {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  line-height: 1.25;
  color: var(--fg-1);
  font-weight: 800;
  margin: 0;
}
h4, .k-h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--fg-1);
  font-weight: 700;
  margin: 0;
}

p, .k-p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}
.k-p-lg {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}
.k-p-sm {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}
.k-caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.k-quote {
  font-family: var(--font-display-rg);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.3;
  color: var(--kapla-blue);
}

.k-tag {
  font-family: var(--font-tag);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 13px;
}

code, .k-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--paper-2);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  color: var(--ink);
}