/* ============================================================
   KanaStudio Core — tokens.css
   The locked brand identity. Mirrors kanastudio-theme/theme.json
   so blocks render identically even under another theme.
   Kana means dream.
   ============================================================ */

/* Fonts are enqueued by the active theme (functions.php). A blocking @import here
   would duplicate that request and slow first paint, so it is intentionally omitted.
   tokens.css ships only brand variables — see kanastudio-theme/theme.json (canonical). */

:root {
  /* ── Palette ────────────────────────────────────────────────────────────────
     Each brand variable derives from the matching theme.json colour preset, so an
     admin editing colours in Site Editor → Styles cascades site-wide with NO code.
     The hex after the comma is a safety fallback if the preset is ever absent
     (e.g. the plugin runs under a non-KanaStudio theme). theme.json is canonical. */
  --ks-canvas:        var(--wp--preset--color--canvas,       #F3EFE9);
  --ks-canvas-alt:    var(--wp--preset--color--canvas-alt,   #EBE6DC);
  --ks-carbon:        var(--wp--preset--color--carbon,       #23252F);
  --ks-carbon-soft:   var(--wp--preset--color--carbon-soft,  #2C2F3C);
  --ks-signal:        var(--wp--preset--color--signal,       #D06247);
  --ks-signal-dark:   var(--wp--preset--color--signal-dark,  #B04D36);
  --ks-signal-light:  var(--wp--preset--color--signal-light, #FAF2F0);
  --ks-muted:         var(--wp--preset--color--muted,        #6D7184);
  --ks-line:          var(--wp--preset--color--line,         #DFD9CD);
  --ks-dark-line:     var(--wp--preset--color--dark-line,    #3F4357);
  --ks-white:         var(--wp--preset--color--white,        #FFFFFF);

  /* ── Semantic text tokens (contrast-safe, WCAG AA) ───────────────────────────
     Derived — never edited by admins — so legibility can't be broken from the UI.
     --ks-dark-line / --ks-line are BORDER-only and must not be used as text. */
  --ks-on-dark:        var(--ks-canvas);   /* primary text on dark surfaces  */
  --ks-on-dark-muted:  #A8A8A4;            /* secondary text on dark (~6:1)  */
  --ks-on-dark-faint:  #87877F;            /* labels/eyebrows on dark (~4.6:1) */
  --ks-on-light:       var(--ks-carbon);   /* primary text on light surfaces */
  --ks-on-light-muted: var(--ks-muted);    /* secondary text on light (~4.7:1) */

  /* Borders — always hairline, always sharp */
  --ks-border:        1px solid var(--ks-carbon);
  --ks-border-light:  1px solid var(--ks-line);
  --ks-border-dark:   1px solid var(--ks-dark-line);

  /* Type */
  --ks-font-serif:  var(--wp--preset--font-family--fraunces, 'Fraunces', Georgia, serif);
  --ks-font-sans:   var(--wp--preset--font-family--dm-sans, 'DM Sans', system-ui, -apple-system, sans-serif);
  --ks-font-mono:   var(--wp--preset--font-family--jetbrains-mono, 'JetBrains Mono', 'Courier New', monospace);

  /* Spacing scale (mirrors theme.json) */
  --ks-space-1:  0.5rem;
  --ks-space-2:  0.75rem;
  --ks-space-3:  1rem;
  --ks-space-4:  1.5rem;
  --ks-space-5:  2rem;
  --ks-space-6:  3rem;
  --ks-space-7:  4rem;
  --ks-space-8:  6rem;

  /* Motion */
  --ks-transition:  140ms linear;
  --ks-ease:        cubic-bezier(0.22, 0.61, 0.20, 1);

  /* Layout — generous, premium rhythm */
  --ks-max:      1280px;
  --ks-content:   720px;
  --ks-pad-x:      48px;
  --ks-pad-x-sm:   22px;
  --ks-section-y:  96px;

  /* Identity lock — never rounded */
  --ks-radius: 0;
}

/* Hard identity rule: KanaStudio blocks never round a corner. */
[class*="wp-block-ks-"],
[class*="wp-block-ks-"] *,
.ks-block,
.ks-block * {
  border-radius: 0 !important;
}

/* ── WordPress FSE layout system overrides ────────────────────────────────────
   FSE's constrained layout clamps every block to contentSize (720px) via
   margin: auto + max-width: !important.
   is-layout-flow adds margin-block-start to every InnerBlocks child.
   Both break our full-bleed, border-divided, gridded design. We win on
   specificity (.wp-site-blocks > X beats :root :where(…)) and load order.
   ─────────────────────────────────────────────────────────────────────────── */

/* 1. Sections span the full viewport — never constrained to contentSize */
.wp-site-blocks > [class*="wp-block-ks-"],
.entry-content > [class*="wp-block-ks-"] {
  max-width: 100% !important;
  margin-inline: 0 !important;
  margin-block: 0 !important;
  padding-inline: 0 !important;
}

/* 2. Grid containers: guarantee display:grid survives is-layout-* injection */
.ks-services,
.ks-process,
.ks-reviews-grid,
.ks-work-grid {
  display: grid !important;
}

/* 3. Grid items: prevent WP from constraining them within their grid cells */
.ks-services > *,
.ks-process > * {
  max-width: 100% !important;
  margin-inline: 0 !important;
  margin-block-start: 0 !important;
}