/* KOMBO Brand Experience — Design System (bundled for deploy) */

/* ============================================================
   KOMBO — Webfonts
   Neurial Grotesk: primary typeface (UI, headings, body).
   Knuckle Down: hand-drawn accent face for playful highlights.
   ============================================================ */

@font-face {
  font-family: "Neurial Grotesk";
  src: url("fonts/NeurialGrotesk-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neurial Grotesk";
  src: url("fonts/NeurialGrotesk-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Neurial Grotesk";
  src: url("fonts/NeurialGrotesk-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neurial Grotesk";
  src: url("fonts/NeurialGrotesk-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Neurial Grotesk";
  src: url("fonts/NeurialGrotesk-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neurial Grotesk";
  src: url("fonts/NeurialGrotesk-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Neurial Grotesk";
  src: url("fonts/NeurialGrotesk-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neurial Grotesk";
  src: url("fonts/NeurialGrotesk-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Neurial Grotesk";
  src: url("fonts/NeurialGrotesk-Extrabold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neurial Grotesk";
  src: url("fonts/NeurialGrotesk-ExtraboldItalic.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* Hand-drawn accent — use SPARINGLY for playful highlights, stickers, callouts. */
@font-face {
  font-family: "Knuckle Down";
  src: url("fonts/KnuckleDown.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ============================================================
   KOMBO — Color system
   The brand lives in THREE vibrant gradient families.
   Each gradient has a warm/light anchor and a deep anchor,
   sampled directly from the official brand illustrations.
   ============================================================ */

:root {
  /* ---- ORANGE / LARANJA  (coral → gold) ---- */
  --kombo-orange-coral: #FF5A37;   /* coral-red, the chameleon head        */
  --kombo-orange-gold:  #FFA402;   /* amber/gold, the flower               */
  --kombo-orange-yellow:#FFC400;   /* bright accent yellow                 */
  --kombo-orange-deep:  #E8431F;   /* pressed / shadow tone                */

  /* ---- BLUE / AZUL  (bright → deep indigo) ---- */
  --kombo-blue-bright:  #007ADA;   /* sky/cyan blue                        */
  --kombo-blue-light:   #00B4F0;   /* lightest highlight                   */
  --kombo-blue-deep:    #020E82;   /* deep indigo                          */
  --kombo-blue-press:   #021A6B;   /* pressed / shadow tone                */

  /* ---- PURPLE / ROXO  (magenta-pink → purple) ---- */
  --kombo-purple-magenta:#E13DB6;  /* hot magenta-pink                     */
  --kombo-purple-violet: #A133BE;  /* purple / lilac                       */
  --kombo-purple-deep:   #7A1F9E;  /* pressed / shadow tone                */

  /* ---- NEUTRALS / INK & PAPER ---- */
  --kombo-ink:        #15151C;   /* near-black, primary text             */
  --kombo-ink-soft:   #2A2A33;   /* secondary text                       */
  --kombo-graphite:   #5A5A66;   /* muted text, captions                 */
  --kombo-slate:      #8C8C99;   /* placeholder, disabled text           */
  --kombo-mist:       #C9C9D1;   /* borders, hairlines                   */
  --kombo-cloud:      #E7E7EC;   /* subtle fills, track                  */
  --kombo-paper:      #F5F4F1;   /* warm off-white surface               */
  --kombo-white:      #FFFFFF;   /* pure white — the "torn paper" reveal */

  /* ============================================================
     GRADIENTS — the signature brand expression.
     Default angle is 100deg (warm anchor → deep anchor).
     ============================================================ */
  --kombo-grad-orange: linear-gradient(100deg, var(--kombo-orange-gold)  0%, var(--kombo-orange-coral) 100%);
  --kombo-grad-blue:   linear-gradient(100deg, var(--kombo-blue-light)   0%, var(--kombo-blue-deep)    100%);
  --kombo-grad-purple: linear-gradient(100deg, var(--kombo-purple-magenta) 0%, var(--kombo-purple-violet) 100%);

  /* Diagonal variants for hero / full-bleed panels */
  --kombo-grad-orange-diag: linear-gradient(135deg, var(--kombo-orange-yellow) 0%, var(--kombo-orange-coral) 90%);
  --kombo-grad-blue-diag:   linear-gradient(135deg, var(--kombo-blue-light)    0%, var(--kombo-blue-deep)    95%);
  --kombo-grad-purple-diag: linear-gradient(135deg, var(--kombo-purple-magenta) 0%, var(--kombo-purple-violet) 95%);

  /* Tri-brand sweep — uses all three families. For festive moments only. */
  --kombo-grad-tri: linear-gradient(100deg,
      var(--kombo-orange-coral) 0%,
      var(--kombo-purple-magenta) 38%,
      var(--kombo-purple-violet) 58%,
      var(--kombo-blue-deep) 100%);

  /* ============================================================
     SEMANTIC ALIASES — reference these in components.
     Default theme = orange (the primary logo lock-up).
     ============================================================ */
  --brand:           var(--kombo-orange-coral);
  --brand-strong:    var(--kombo-orange-deep);
  --brand-grad:      var(--kombo-grad-orange);

  --text-strong:     var(--kombo-ink);
  --text-body:       var(--kombo-ink-soft);
  --text-muted:      var(--kombo-graphite);
  --text-faint:      var(--kombo-slate);
  --text-on-brand:   var(--kombo-white);

  --surface-page:    var(--kombo-white);
  --surface-raised:  var(--kombo-white);
  --surface-sunken:  var(--kombo-paper);
  --surface-inverse: var(--kombo-ink);

  --border-subtle:   var(--kombo-cloud);
  --border-default:  var(--kombo-mist);
  --border-strong:   var(--kombo-ink);

  /* Status — kept inside the brand temperature where possible */
  --status-success:  #1E9E5A;
  --status-warning:  var(--kombo-orange-gold);
  --status-danger:   #E8431F;
  --status-info:     var(--kombo-blue-bright);
}

/* ============================================================
   THEME SCOPES — drop .theme-blue / .theme-purple on any
   container to re-point the semantic brand aliases.
   ============================================================ */
.theme-orange {
  --brand: var(--kombo-orange-coral);
  --brand-strong: var(--kombo-orange-deep);
  --brand-grad: var(--kombo-grad-orange);
}
.theme-blue {
  --brand: var(--kombo-blue-bright);
  --brand-strong: var(--kombo-blue-press);
  --brand-grad: var(--kombo-grad-blue);
}
.theme-purple {
  --brand: var(--kombo-purple-violet);
  --brand-strong: var(--kombo-purple-deep);
  --brand-grad: var(--kombo-grad-purple);
}


/* ============================================================
   KOMBO — Typography
   Neurial Grotesk does all the work: a warm, slightly rounded
   grotesque. Headlines run EXTRABOLD (800) and tight; body runs
   regular (400) and comfortable. Knuckle Down is a hand-drawn
   accent used only for stickers / playful highlights.
   ============================================================ */

:root {
  /* Families */
  --font-sans:    "Neurial Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Neurial Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-hand:    "Knuckle Down", "Comic Sans MS", cursive;
  --font-mono:    "Courier New", ui-monospace, monospace; /* contact-sheet numerals */

  /* Weights */
  --fw-light:     300; /* @kind font */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */

  /* Type scale — tuned for screen. Display sizes are deliberately big & loud. */
  --fs-display-xl: 5.5rem;   /* 88px — hero statements         */
  --fs-display-l:  4rem;     /* 64px — page titles             */
  --fs-display-m:  3rem;     /* 48px — section titles          */
  --fs-h1:         2.25rem;  /* 36px                           */
  --fs-h2:         1.75rem;  /* 28px                           */
  --fs-h3:         1.375rem; /* 22px                           */
  --fs-h4:         1.125rem; /* 18px                           */
  --fs-body-lg:    1.125rem; /* 18px                           */
  --fs-body:       1rem;     /* 16px                           */
  --fs-body-sm:    0.875rem; /* 14px                           */
  --fs-caption:    0.75rem;  /* 12px                           */
  --fs-overline:   0.6875rem;/* 11px — letterspaced labels     */

  /* Line heights */
  --lh-tight:    1.02; /* @kind font */   /* display              */
  --lh-snug:     1.12; /* @kind font */   /* headings             */
  --lh-normal:   1.5; /* @kind font */    /* body                 */
  --lh-relaxed:  1.65; /* @kind font */   /* long-form            */

  /* Letter spacing */
  --ls-tight:    -0.02em;  /* big display                    */
  --ls-snug:     -0.01em;  /* headings                       */
  --ls-normal:   0em;
  --ls-wide:     0.08em;   /* overlines                      */
  --ls-wider:    0.22em;   /* "BRAND EXPERIENCE" lock-up     */

  /* Semantic roles */
  --text-display:  var(--fw-extrabold) var(--fs-display-l)/var(--lh-tight) var(--font-display);
  --text-title:    var(--fw-extrabold) var(--fs-h1)/var(--lh-snug) var(--font-display);
  --text-heading:  var(--fw-bold) var(--fs-h3)/var(--lh-snug) var(--font-sans);
  --text-base:     var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-sans);
  --text-label:    var(--fw-bold) var(--fs-overline)/1 var(--font-sans);
}


/* ============================================================
   KOMBO — Spacing, radii, shadows, motion
   Base unit: 4px. The brand favours generous white space
   (the "torn-paper reveal") and rounded, friendly forms.
   ============================================================ */

:root {
  /* Spacing scale (4px base) */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* Radii — friendly & rounded, echoing the soft logo forms */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-2xl:  44px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Border widths */
  --border-hair: 1px; /* @kind spacing */
  --border-thin: 1.5px; /* @kind spacing */
  --border-bold: 2.5px; /* @kind spacing */   /* the brand likes a confident outline */

  /* Shadows — soft, low-spread, slightly warm. Never harsh. */
  --shadow-xs:  0 1px 2px rgba(21, 21, 28, 0.06);
  --shadow-sm:  0 2px 8px rgba(21, 21, 28, 0.08);
  --shadow-md:  0 8px 24px rgba(21, 21, 28, 0.10);
  --shadow-lg:  0 18px 48px rgba(21, 21, 28, 0.14);
  --shadow-xl:  0 28px 70px rgba(21, 21, 28, 0.18);
  /* Colored glow — tint a shadow with the active brand for emphasis */
  --shadow-brand: 0 12px 32px rgba(255, 90, 55, 0.32);

  /* Motion — quick, lively, a little bounce. The carioca energy. */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur-base:    220ms; /* @kind other */
  --dur-slow:    380ms; /* @kind other */

  /* Layout */
  --container-max: 1200px; /* @kind spacing */
  --container-pad: var(--space-6); /* @kind spacing */
}


/* ============================================================
   KOMBO — Base reset & brand utilities
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p { margin: 0; }

/* ---- Brand utilities -------------------------------------- */

/* Gradient-filled text (the headline signature move) */
.kombo-grad-text {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kombo-grad-text.is-orange { background: var(--kombo-grad-orange); -webkit-background-clip: text; background-clip: text; }
.kombo-grad-text.is-blue   { background: var(--kombo-grad-blue);   -webkit-background-clip: text; background-clip: text; }
.kombo-grad-text.is-purple { background: var(--kombo-grad-purple); -webkit-background-clip: text; background-clip: text; }

/* Halftone dot field — a core texture motif. Layer over a brand gradient. */
.kombo-halftone {
  background-image: radial-gradient(rgba(21,21,28,0.55) 22%, transparent 23%);
  background-size: 9px 9px;
  background-position: 0 0;
}

/* Engineering grid overlay — the contact-sheet / blueprint motif */
.kombo-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.35) var(--border-hair), transparent var(--border-hair)),
    linear-gradient(90deg, rgba(255,255,255,0.35) var(--border-hair), transparent var(--border-hair));
  background-size: 56px 56px;
}

/* Contact-sheet numerals — small mono labels seen on brand templates */
.kombo-sheet-mark {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.12em;
  font-weight: 700;
}

/* The "BRAND EXPERIENCE" lock-up styling */
.kombo-lockup {
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

/* Focus ring — consistent across interactive components */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--border-bold) solid var(--brand);
  outline-offset: 2px;
}