/* ============================================================
   KAELO GLOBAL — DESIGN TOKENS
   The single source of truth for colour, type, space and motion.
   Quiet-luxury enterprise: rich through space, type and restraint.
   ============================================================ */

:root {
  /* --- Brand palette ------------------------------------------------ */
  --k-black:       #000000;   /* true black — full-bleed dark sections   */
  --k-ink:         #0A0A0A;   /* near-black — body text on light         */
  --k-charcoal:    #1C1C1C;   /* charcoal — secondary dark surfaces       */
  --k-cyan:        #03F1FF;   /* the single sharp accent — use sparingly  */
  --k-cyan-deep:   #04C2CC;   /* cyan for hover/links on light bg         */
  --k-silver:      #B5B5B5;   /* muted text, captions, hairlines on dark  */
  --k-canvas:      #F6F5F1;   /* warm off-white — the primary page canvas */
  --k-white:       #FFFFFF;

  /* --- Functional tints (built from the palette) -------------------- */
  --k-ink-60:      rgba(10,10,10,0.60);  /* muted body copy on light     */
  --k-ink-40:      rgba(10,10,10,0.40);  /* captions, meta on light      */
  --k-line:        rgba(10,10,10,0.12);  /* hairline rules on light      */
  --k-white-60:    rgba(255,255,255,0.60);
  --k-white-40:    rgba(255,255,255,0.40);
  --k-line-dark:   rgba(255,255,255,0.12); /* hairline rules on dark     */

  /* --- Typography families -----------------------------------------
     Two faces only:
       1. Reem Kufi — display headings, eyebrows, accents.
       2. Apple system stack (Helvetica family) — all body and UI.
     No serif, no italic display, no third face. */
  --k-font-heading: 'Reem Kufi', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --k-font-body:    -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* Accent alias retained for backwards-compat with templates; it now
     resolves to the body stack. Anywhere we used Cormorant italic we
     now use plain body type. */
  --k-font-accent:  var(--k-font-body);

  /* --- Fluid type scale (clamp: min, preferred, max) --------------- */
  --k-text-xs:   0.75rem;                              /* 12px — labels  */
  --k-text-sm:   0.875rem;                             /* 14px — meta    */
  --k-text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);   /* 16–17 body */
  --k-text-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --k-text-xl:   clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
  --k-text-2xl:  clamp(1.75rem, 1.4rem + 1.7vw, 2.75rem);
  --k-text-3xl:  clamp(2.25rem, 1.7rem + 2.8vw, 4rem);
  --k-text-4xl:  clamp(3rem, 2rem + 5vw, 6.5rem);      /* hero display   */

  /* --- Type detail -------------------------------------------------- */
  --k-leading-tight:  1.08;   /* display headings                       */
  --k-leading-snug:   1.3;    /* sub-headings                           */
  --k-leading-body:   1.7;    /* body copy — generous, editorial        */
  --k-tracking-label: 0.18em; /* uppercase labels / eyebrows            */
  --k-tracking-tight: -0.01em;

  /* --- Spacing scale ----------------------------------------------- */
  --k-space-1:  0.5rem;
  --k-space-2:  1rem;
  --k-space-3:  1.5rem;
  --k-space-4:  2.5rem;
  --k-space-5:  4rem;
  --k-space-6:  6rem;
  --k-space-7:  9rem;       /* section padding on large screens         */

  /* --- Layout ------------------------------------------------------- */
  --k-container: 1280px;    /* max content width                        */
  --k-container-wide: 1560px;
  --k-bleed: clamp(1.25rem, 5vw, 6rem);  /* horizontal page gutter      */

  /* --- Motion ------------------------------------------------------- */
  --k-ease:       cubic-bezier(0.16, 1, 0.3, 1);  /* smooth, expensive   */
  --k-dur-fast:   0.35s;
  --k-dur-base:   0.6s;
  --k-dur-slow:   1s;
}

/* ============================================================
   GLOBAL BASE — light touch only.
   Heavy layout work happens in Kadence patterns/templates.
   ============================================================ */

body {
  background-color: var(--k-canvas);
  color: var(--k-ink);
  font-family: var(--k-font-body);
  font-size: var(--k-text-base);
  line-height: var(--k-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .site-title {
  font-family: var(--k-font-heading);
  line-height: var(--k-leading-snug);
  letter-spacing: var(--k-tracking-tight);
  font-weight: 500;
  color: var(--k-ink);
}

h1 { line-height: var(--k-leading-tight); }

/* Uppercase eyebrow / label utility */
.k-label {
  font-family: var(--k-font-heading);
  font-size: var(--k-text-xs);
  letter-spacing: var(--k-tracking-label);
  text-transform: uppercase;
  color: var(--k-ink-40);
}

/* Editorial accent — was Cormorant italic; now sets accent in body
   stack at lighter weight with restrained letter-spacing. */
.k-accent {
  font-family: var(--k-font-body);
  font-style: normal;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--k-ink-60);
}

/* ============================================================
   BRAND TYPE LOCK
   No italic, no cursive, anywhere — overrides any legacy rules.
   Two faces only: Reem Kufi (display) + Apple system (everything else).
   ============================================================ */
em, i, cite, blockquote, .k-accent,
.k-press__dek, .k-pullquote, .k-pullquote__quote,
[class*="--italic"], [class*="-italic"] {
  font-style: normal !important;
  font-family: var(--k-font-body) !important;
}

/* Hairline rule */
.k-rule {
  border: 0;
  border-top: 1px solid var(--k-line);
  margin: 0;
}

a {
  color: var(--k-cyan-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--k-dur-fast) var(--k-ease);
}
a:hover { color: var(--k-ink); }

::selection {
  background: var(--k-cyan);
  color: var(--k-black);
}

/* Dark-section context: invert text colours for full-bleed black sections */
.k-dark,
.k-dark h1, .k-dark h2, .k-dark h3, .k-dark h4, .k-dark h5, .k-dark h6 {
  color: var(--k-white);
}
.k-dark { background-color: var(--k-black); }
.k-dark .k-label { color: var(--k-cyan); }
.k-dark a { color: var(--k-cyan); }
.k-dark a:hover { color: var(--k-white); }

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}