/* ===========================================================================
   Navoq Media — Color & Type Foundations
   Source: Navoq Brand Book 2026 + Brand Identity package
   =========================================================================== */

/* --- Accent face: DM Serif Display -----------------------------------------
   Stand-in for the brand's original (unbundled) serif-italic accent face.
   Served from Google's CDN so the family resolves without a local upload.
   If the true accent face is provided, drop it into /fonts and repoint these
   src URLs (keep the family name as the --font-accent token expects).        */
@font-face {
  font-family: "DM Serif Display";
  src: url("https://fonts.gstatic.com/s/dmserifdisplay/v16/-nFnOHM81r4j6k0gjAW3mujVU2B2K_d709jy92k.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Serif Display";
  src: url("https://fonts.gstatic.com/s/dmserifdisplay/v16/-nFhOHM81r4j6k0gjAW3mujVU2B2G_Bx0vrx52gd.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* --- Webfonts (loaded from /fonts) ------------------------------------------ */
@font-face {
  font-family: "Fivo Sans Modern";
  src: url("./fonts/FivoSansModern-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fivo Sans Modern";
  src: url("./fonts/FivoSansModern-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fivo Sans Modern";
  src: url("./fonts/FivoSansModern-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fivo Sans Modern";
  src: url("./fonts/FivoSansModern-Heavy.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("./fonts/Poppins-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("./fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("./fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("./fonts/Poppins-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================================
   ROOT — Design Tokens
   ============================================================================ */
:root {
  /* --- Brand Core Palette ---
     Pulled directly from the Brand Book color page. Three colors carry the
     entire system: Midnight (deep background), Indigo (signature action /
     brand surface), Lavender (accent + highlights). */
  --nv-midnight:        #140d2f;   /* deep blue/black — primary background    */
  --nv-indigo:          #4b0df5;   /* signature violet — brand color          */
  --nv-lavender:        #c5a9ff;   /* light accent — highlights & chips       */

  /* Extended brand-derived shades (oklch tints/shades of the core three) */
  --nv-midnight-900:    #0a0620;
  --nv-midnight-800:    #100a28;
  --nv-midnight-700:    #140d2f;
  --nv-midnight-600:    #1c1340;
  --nv-midnight-500:    #281c5a;
  --nv-midnight-400:    #36277a;

  --nv-indigo-700:      #3a09c4;
  --nv-indigo-600:      #4b0df5;
  --nv-indigo-500:      #6a3afa;
  --nv-indigo-400:      #8c66ff;

  --nv-lavender-300:    #c5a9ff;
  --nv-lavender-200:    #d8c3ff;
  --nv-lavender-100:    #ece0ff;

  /* --- Neutrals ---
     The brand book uses near-black midnight and pure white. A few mid-greys
     handle dividers, muted text and quiet surfaces. */
  --nv-white:           #ffffff;
  --nv-ink:             #0a0620;   /* near-black for text on light surfaces   */
  --nv-grey-50:         #f6f4fb;
  --nv-grey-100:        #ebe7f3;
  --nv-grey-200:        #d6d1e2;
  --nv-grey-400:        #8d86a3;
  --nv-grey-600:        #565070;
  --nv-grey-800:        #2a2440;

  /* --- Semantic foreground / background ---
     The brand is fundamentally a DARK system; "dark" tokens are the default.
     Light tokens exist for documents, invoices, business cards. */

  /* Dark surface — default */
  --bg-1:               var(--nv-midnight-800);  /* page background          */
  --bg-2:               var(--nv-midnight-700);  /* card / panel             */
  --bg-3:               var(--nv-midnight-600);  /* hovered / raised         */
  --bg-overlay:         rgba(20, 13, 47, 0.72);  /* modal scrim              */

  --fg-1:               var(--nv-white);          /* primary text on dark    */
  --fg-2:               #d8d3ec;                  /* secondary text          */
  --fg-3:               #8e88ad;                  /* tertiary / captions     */
  --fg-muted:           #6b6589;
  --fg-on-accent:       var(--nv-white);
  --fg-on-lavender:     var(--nv-midnight-700);   /* text inside a lavender chip */

  /* Light surface — for business cards, invoices, the few light slides */
  --bg-light-1:         #ffffff;
  --bg-light-2:         var(--nv-grey-50);
  --fg-light-1:         var(--nv-midnight-700);
  --fg-light-2:         var(--nv-grey-600);

  --accent:             var(--nv-indigo-600);     /* primary action          */
  --accent-hover:       var(--nv-indigo-500);
  --accent-press:       var(--nv-indigo-700);
  --accent-soft:        rgba(75, 13, 245, 0.16);  /* tinted hover            */
  --highlight:          var(--nv-lavender-300);   /* chip / highlight pill   */

  /* --- Status (used sparingly) --- */
  --success:            #4ade80;
  --warning:            #f9c74f;
  --danger:             #f97366;
  --info:               var(--nv-lavender-300);

  /* --- Signature gradients ---
     The brand book defines two gradient variants. Gradient 1 is the soft
     diagonal lavender→indigo used as a brand background. Gradient 2 is the
     deeper indigo→midnight used in product surfaces. */
  --grad-1:             linear-gradient(135deg, #c5a9ff 0%, #6a3afa 50%, #4b0df5 100%); /* @kind color */
  --grad-2:             linear-gradient(135deg, #4b0df5 0%, #2a0e8a 60%, #140d2f 100%); /* @kind color */
  --grad-radial:        radial-gradient(120% 80% at 0% 0%, #6a3afa 0%, #2a0e8a 45%, #140d2f 100%); /* @kind color */
  --grad-mark:          linear-gradient(135deg, #c5a9ff 0%, #4b0df5 100%); /* @kind color */

  /* ============================================================================
     TYPOGRAPHY
     Primary: Fivo Sans Modern (display + UI).
     Secondary: Poppins (body, captions, signatures).
     A serif-italic accent (DM Serif Display) handles "highlighted" words used in
     the social carousel system, e.g. "on _Social_", "_Incredible Products_".
     ============================================================================ */
  --font-display:       "Fivo Sans Modern", "Inter", system-ui, sans-serif;
  --font-body:          "Poppins", "Inter", system-ui, sans-serif;
  --font-accent:        "DM Serif Display", "Times New Roman", serif;

  /* Type scale — built from a 1.25 modular scale, tuned for display headlines */
  --t-display-xl:       clamp(56px, 7vw, 96px);   /* @kind font */
  --t-display-lg:       clamp(44px, 5.2vw, 72px); /* @kind font */
  --t-display-md:       clamp(36px, 4vw, 56px);   /* @kind font */
  --t-h1:               clamp(32px, 3.4vw, 48px); /* @kind font */
  --t-h2:               36px;  /* @kind font */
  --t-h3:               28px;  /* @kind font */
  --t-h4:               22px;  /* @kind font */
  --t-h5:               18px;  /* @kind font */
  --t-body-lg:          18px;  /* @kind font */
  --t-body:             16px;  /* @kind font */
  --t-body-sm:          14px;  /* @kind font */
  --t-caption:          12px;  /* @kind font */
  --t-overline:         11px;  /* @kind font */

  /* Line-height & letter-spacing */
  --lh-tight:           1.05;  /* @kind font */
  --lh-snug:            1.18;  /* @kind font */
  --lh-normal:          1.4;  /* @kind font */
  --lh-relaxed:         1.6;  /* @kind font */

  --ls-display:         -0.02em;   /* @kind font */
  --ls-overline:        0.14em;    /* @kind font */
  --ls-body:            0;         /* @kind font */

  /* Weights (named for clarity) */
  --w-light:            300;  /* @kind font */
  --w-regular:          400;  /* @kind font */
  --w-medium:           500;  /* @kind font */
  --w-semibold:         600;  /* @kind font */
  --w-bold:             700;  /* @kind font */
  --w-heavy:            900;  /* @kind font */

  /* ============================================================================
     SPACING, RADII, SHADOWS
     ============================================================================ */
  /* 4px base scale */
  --s-1:                4px;
  --s-2:                8px;
  --s-3:                12px;
  --s-4:                16px;
  --s-5:                20px;
  --s-6:                24px;
  --s-8:                32px;
  --s-10:               40px;
  --s-12:               48px;
  --s-16:               64px;
  --s-20:               80px;
  --s-24:               96px;

  /* Radii — borrowed from the soft, rounded logo geometry */
  --r-1:                4px;
  --r-2:                8px;
  --r-3:                12px;   /* default card radius                         */
  --r-4:                16px;
  --r-5:                20px;
  --r-pill:             999px;  /* "Problem 01:" / "Fix:" pill chips           */

  /* Border treatments */
  --border-1:           1px solid rgba(197, 169, 255, 0.18);  /* @kind other */
  --border-2:           1px solid rgba(197, 169, 255, 0.32);  /* @kind other */
  --border-light:       1px solid rgba(20, 13, 47, 0.10);     /* @kind other */
  --border-accent:      1px solid var(--nv-indigo-500);

  /* Shadow system — soft, low-saturation violet drop shadows */
  --shadow-sm:          0 1px 2px rgba(10, 6, 32, 0.45);
  --shadow-md:          0 8px 24px rgba(10, 6, 32, 0.42);
  --shadow-lg:          0 20px 60px rgba(10, 6, 32, 0.55);
  --shadow-glow:        0 0 0 1px rgba(197, 169, 255, 0.22),
                        0 12px 40px rgba(75, 13, 245, 0.35);
  --shadow-inset:       inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* Motion */
  --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 */
  --dur-fast:           120ms; /* @kind other */
  --dur-base:           200ms; /* @kind other */
  --dur-slow:           360ms; /* @kind other */
}

/* ============================================================================
   BASE / SEMANTIC ELEMENT STYLES
   Use these as defaults; override per-component as needed.
   ============================================================================ */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-display-lg);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  margin: 0;
}
h5, .h5 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--t-h5);
  line-height: var(--lh-snug);
  margin: 0;
}

p, .p {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}

small, .caption {
  font-family: var(--font-body);
  font-size: var(--t-caption);
  color: var(--fg-3);
}

.overline {
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size: var(--t-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--fg-3);
}

.accent-italic {
  /* The brand's signature: serif italic word inside a sans display headline */
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: var(--w-regular);
  color: var(--nv-lavender-300);
}

a {
  color: var(--nv-lavender-300);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--nv-white); }

code, kbd, pre {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
}

/* Selection follows the highlight chip treatment */
::selection {
  background: var(--nv-lavender-300);
  color: var(--nv-midnight-700);
}