/* ===================================================================
   KNOVIT — colors_and_type.css
   Single source of truth for color and typography tokens.
   Import from any Knovit surface (mobile app, desktop app, landing).

   Aesthetic frame:
     Arc Search calm, sharp typography, generous white space.
     One restrained accent (deep indigo). Color = state, not decoration.
   =================================================================== */

/* ---------- 0.  @IMPORTS (must come before any other rule) --------- */
/* Fraunces — rare editorial accent only. Self-hosted (no external requests).
   Variable woff2 (opsz 9..144 + wght); subsets latin / latin-ext / vietnamese,
   same unicode-ranges Google serves. Weights used: 400–600 normal. Optical
   sizing is automatic (browser maps font-size -> opsz). */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/fraunces/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/fraunces/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/fraunces/fraunces-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}


/* ---------- 1.  WEBFONTS — Host Grotesk (brand-supplied) ----------- */
/* Variable font covers 300–800 + an italic axis. Static cuts are kept
   on disk in fonts/ and are picked up by name-matched tooling. */

@font-face {
  font-family: "Host Grotesk";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("fonts/HostGrotesk-VariableFont_wght.ttf") format("truetype");
}
@font-face {
  font-family: "Host Grotesk";
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url("fonts/HostGrotesk-Italic-VariableFont_wght.ttf") format("truetype");
}


:root {

  /* ---------- 2.  CORE COLOR PALETTE -------------------------------- */

  /* Indigo — primary. Extracted from logo_primary.png at #3C007C.       */
  --knv-indigo-50:   #F4EEFB;
  --knv-indigo-100:  #E6D8F4;
  --knv-indigo-200:  #C9A8E5;
  --knv-indigo-300:  #9F6FD0;
  --knv-indigo-400:  #6F37B3;
  --knv-indigo-500:  #4D1499;
  --knv-indigo-600:  #3C007C;        /* BRAND PRIMARY (logo) */
  --knv-indigo-700:  #2E005E;
  --knv-indigo-800:  #1F0042;
  --knv-indigo-900:  #110028;
  --knv-indigo-950:  #08001A;

  /* Teal — secondary, used sparingly. */
  --knv-teal-50:     #E6F4F3;
  --knv-teal-100:    #C3E5E2;
  --knv-teal-300:    #6FBCB4;
  --knv-teal-500:    #178D81;
  --knv-teal-600:    #0F7268;
  --knv-teal-700:    #0A554E;

  /* Sunrise gradient stops — the orb in the logomark. */
  --knv-orb-cyan:    #B3F0FF;
  --knv-orb-violet:  #C6A8FF;
  --knv-orb-pink:    #FF7AA8;
  --knv-orb-red:     #FF3D2E;

  /* Neutral ramp — warm off-white → ink. */
  --knv-paper:       #FBFAF7;
  --knv-paper-soft:  #F4F2EC;
  --knv-line-soft:   #ECEAE2;
  --knv-line:        #DEDBD0;
  --knv-line-strong: #C9C5B6;
  --knv-mute:        #8B8678;
  --knv-body:        #5A5648;
  --knv-ink:         #1A1620;
  --knv-ink-deep:    #0B0916;
  --knv-white:       #FFFFFF;


  /* ---------- 3.  SEMANTIC COLOR (state, never decoration) ---------- */

  /* Warmth — relationship temperature (People module). */
  --knv-warmth-new:    #9CA3AF;
  --knv-warmth-hot:    #E24B4A;
  --knv-warmth-warm:   #D97706;
  --knv-warmth-cold:   #85B7EB;

  /* Priority — tasks (NEVER green here). */
  --knv-prio-high:     #E24B4A;
  --knv-prio-medium:   #D97706;
  --knv-prio-low:      #3B82F6;

  /* Completion — green is RESERVED for completion only. */
  --knv-completion:    #2F9E63;
  --knv-completion-bg: #E2F2E9;

  /* Status — neutral signaling. */
  --knv-info:          #3B6AE0;
  --knv-success:       #2F9E63;
  --knv-warning:       #D97706;
  --knv-danger:        #DC2A2A;

  /* Editable affordance — dashed blue around tap-to-edit fields. */
  --knv-edit-border:   #5B7CFF;


  /* ---------- 4.  ROLE TOKENS --------------------------------------- */

  --knv-bg:            var(--knv-paper);
  --knv-bg-elev:       var(--knv-white);
  --knv-bg-work:       var(--knv-paper-soft);
  --knv-bg-inverse:    var(--knv-indigo-600);

  --knv-fg:            var(--knv-ink);
  --knv-fg-strong:     var(--knv-ink-deep);
  --knv-fg-muted:      var(--knv-body);
  --knv-fg-soft:       var(--knv-mute);
  --knv-fg-inverse:    var(--knv-white);
  --knv-fg-link:       var(--knv-indigo-600);

  --knv-accent:        var(--knv-indigo-600);
  --knv-accent-hover:  var(--knv-indigo-700);
  --knv-accent-soft:   var(--knv-indigo-50);
  --knv-accent-ring:   color-mix(in oklab, var(--knv-indigo-600) 25%, transparent);

  --knv-border:        var(--knv-line);
  --knv-border-soft:   var(--knv-line-soft);
  --knv-border-strong: var(--knv-line-strong);


  /* ---------- 5.  TYPOGRAPHY ---------------------------------------- */

  --knv-font-sans:    "Host Grotesk", "Inter", -apple-system, BlinkMacSystemFont,
                       "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --knv-font-display: "Host Grotesk", "Inter", system-ui, sans-serif;
  --knv-font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --knv-font-serif:   "Fraunces", "Iowan Old Style", Georgia, serif;

  /* Scale — Moment screens use ≥18px. Work screens go down to 14px. */
  --knv-text-2xs:   11px;
  --knv-text-xs:    12px;
  --knv-text-sm:    14px;
  --knv-text-base:  15px;
  --knv-text-md:    16px;
  --knv-text-lg:    18px;
  --knv-text-xl:    22px;
  --knv-text-2xl:   28px;
  --knv-text-3xl:   36px;
  --knv-text-4xl:   48px;
  --knv-text-5xl:   64px;
  --knv-text-6xl:   84px;

  --knv-leading-tight:   1.1;
  --knv-leading-snug:    1.25;
  --knv-leading-normal:  1.45;
  --knv-leading-relaxed: 1.6;

  --knv-tracking-tight:  -0.02em;
  --knv-tracking-snug:   -0.01em;
  --knv-tracking-normal:  0em;
  --knv-tracking-wide:    0.04em;

  --knv-weight-light:    300;
  --knv-weight-regular:  400;
  --knv-weight-medium:   500;
  --knv-weight-semibold: 600;
  --knv-weight-bold:     700;


  /* ---------- 6.  SPACING / RADIUS / SHADOW ------------------------- */

  --knv-s-0:   0px;
  --knv-s-1:   4px;
  --knv-s-2:   8px;
  --knv-s-3:   12px;
  --knv-s-4:   16px;
  --knv-s-5:   20px;
  --knv-s-6:   24px;
  --knv-s-7:   32px;
  --knv-s-8:   40px;
  --knv-s-9:   56px;
  --knv-s-10:  72px;
  --knv-s-11:  96px;
  --knv-s-12:  128px;

  --knv-r-xs:  6px;
  --knv-r-sm:  10px;
  --knv-r-md:  14px;
  --knv-r-lg:  20px;
  --knv-r-xl:  28px;
  --knv-r-pill: 999px;

  --knv-shadow-xs: 0 1px 2px rgba(20, 12, 36, 0.04);
  --knv-shadow-sm: 0 2px 6px rgba(20, 12, 36, 0.05),
                   0 0 0 1px rgba(20, 12, 36, 0.025);
  --knv-shadow-md: 0 6px 18px -8px rgba(20, 12, 36, 0.10),
                   0 2px 4px rgba(20, 12, 36, 0.04);
  --knv-shadow-lg: 0 18px 40px -16px rgba(20, 12, 36, 0.18),
                   0 4px 10px -4px rgba(20, 12, 36, 0.06);
  --knv-shadow-fab: 0 12px 28px -8px rgba(60, 0, 124, 0.35),
                    0 4px 12px -4px rgba(60, 0, 124, 0.20);
  --knv-shadow-inset-line: inset 0 0 0 1px var(--knv-border);


  /* ---------- 7.  MOTION -------------------------------------------- */

  --knv-dur-fast:   150ms;
  --knv-dur-med:    220ms;
  --knv-dur-vc:     360ms;
  --knv-dur-slow:   600ms;

  --knv-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --knv-ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --knv-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);


  /* ---------- 8.  GRADIENTS (use sparingly) ------------------------- */

  --knv-grad-orb: radial-gradient(120% 110% at 70% 20%,
                    var(--knv-orb-red)    0%,
                    var(--knv-orb-pink)  35%,
                    var(--knv-orb-violet) 70%,
                    var(--knv-orb-cyan)  100%);
  --knv-grad-sky: linear-gradient(180deg,
                    #DDF2FF 0%, #F2E1FF 50%, #FFE2DB 100%);


  /* =================================================================
     v2 — Aligned token names used across the latest design-system cards
     in /preview. These are the names the brand owner edits against.
     The v1 --knv-* tokens above are kept for the legacy ui_kits/.
     ================================================================= */

  /* ---- Type families (semantic names) ---- */
  --font-wordmark:  "Host Grotesk", "ATYP Display", "General Sans", system-ui, sans-serif;
  --font-display:   "Host Grotesk", "Inter", system-ui, sans-serif;
  --font-text:      "Host Grotesk", "Inter", -apple-system, BlinkMacSystemFont,
                     "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:      ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* ---- Brand — the five canonical color tokens ---- */
  --knovit-purple:  #3C007C;   /* primary · wordmark · action color */
  --knovit-coral:   #FD4B31;   /* sphere highlight · wordmark dot · spark */
  --knovit-pink:    #F588C2;   /* sphere stop 2 · also wordmark dot value */
  --knovit-lilac:   #F0A2EE;   /* sphere stop 3 */
  --knovit-sky:     #CCF0FE;   /* sphere stop 4 — cool edge */

  /* ---- Brand objects ---- */
  /* The sphere — sampled from logo_primary.png. Flat. */
  --knovit-gradient: radial-gradient(
    circle at 72% 18%,
    #FD4B31  0%,
    #FC5A55  6%,
    #F8728D 12%,
    #F77CA7 20%,
    #F58DD0 32%,
    #E7B4F1 46%,
    #E1C3F4 58%,
    #D7D8F8 72%,
    #CCF0FD 90%
  );
  /* The atmosphere — radial, warm light anchored at bottom-center. */
  --knovit-atmosphere: radial-gradient(
    ellipse 120% 100% at 50% 100%,
    #FF4322 0%,
    #FD4D38 6%,
    #FC554A 14%,
    #FB6066 22%,
    #F8779C 38%,
    #F58ED3 55%,
    #E5B9F2 72%,
    #DEC8F5 86%,
    #D1E5FB 100%
  );
  /* Atmosphere — simpler full-bleed linear */
  --knovit-atmosphere-linear: linear-gradient(
    to top,
    #FF4322 0%, #FC554A 14%,
    #F8779C 35%, #F58ED3 55%,
    #E5B9F2 72%, #D1E5FB 100%
  );

  /* ---- Ink ramp (indigo-tinted neutrals) ---- */
  --ink-0:    #FFFFFF;
  --ink-50:   #F8F8FB;
  --ink-100:  #F2F3F8;
  --ink-150:  #E9EAF2;
  --ink-200:  #DEE0EC;
  --ink-300:  #C2C4D6;
  --ink-400:  #9296B3;
  --ink-500:  #6E7191;
  --ink-600:  #4B4E6B;
  --ink-700:  #2E314F;
  --ink-800:  #1B1E3A;
  --ink-900:  #0F1226;

  /* ---- Foreground roles ---- */
  --fg-1: var(--ink-900);   /* primary body */
  --fg-2: var(--ink-600);   /* secondary */
  --fg-3: var(--ink-500);   /* tertiary / meta */

  /* ---- Surfaces ---- */
  --bg-page:      var(--ink-50);
  --surface-page: var(--ink-50);
  --warm-cream:   #FBF7F0;
  --warm-cream-2: #F7F2E8;
  --warm-shell:   #F4EFE3;
  --warm-blush:   #F9E8EC;

  /* ---- Operational accents (dense UI exception) ---- */
  --indigo-50:   #F4F3FD;
  --indigo-100:  #E7E5FA;
  --indigo-300:  #8A80EE;
  --indigo-500:  #5B4FE0;
  --indigo-700:  #3A2FA0;
  --indigo-900:  #1F1A4D;

  --teal-100:    #D6F2F4;
  --teal-500:    #1AA3B3;
  --teal-700:    #0E6E7A;

  --success-100: #E5F4EE;
  --success-700: #0E7C4F;
  --warning-100: #FBEBD2;
  --warning-700: #8A5A12;
  --danger-100:  #FBE6E6;
  --danger-700:  #B0312E;

  /* ---- AI Sparkle — provenance indicator
     Marks any content/element generated or extracted by the AI assistant.
     Distinct from Knovit Purple (brand) and operational Indigo. */
  --ai-sparkle:          #7C3AED;   /* canonical · vivid violet · light surfaces */
  --ai-sparkle-soft:     #F3EAFE;   /* tint for backgrounds, chip washes */
  --ai-sparkle-soft-2:   #E9DBFC;   /* slightly stronger tint */
  --ai-sparkle-inverse:  #A78BFA;   /* lighter sibling · dark surfaces */

  /* ---- Motion ---- */
  --ease-calm:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    var(--knv-ease-out);
  --d-moment:    360ms;
  --d-fast:      150ms;

  /* ---- Elevation — only for physically floating UI ---- */
  --sh-modal: 0 24px 60px -20px rgba(15, 18, 38, 0.30),
              0 6px 16px -6px rgba(15, 18, 38, 0.12);
  --sh-sheet: 0 -10px 32px -12px rgba(15, 18, 38, 0.18),
              0 -2px 6px rgba(15, 18, 38, 0.05);
}


/* ===================================================================
   9. SEMANTIC TYPOGRAPHY  —  ready-to-use classes
   =================================================================== */

html, body {
  font-family: var(--knv-font-sans);
  font-size: var(--knv-text-base);
  line-height: var(--knv-leading-normal);
  color: var(--knv-fg);
  background: var(--knv-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.knv-display {
  font-family: var(--knv-font-display);
  font-size: clamp(48px, 7vw, var(--knv-text-6xl));
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: var(--knv-weight-medium);
  color: var(--knv-fg-strong);
  text-wrap: balance;
}

.knv-h1 {
  font-family: var(--knv-font-display);
  font-size: var(--knv-text-3xl);
  line-height: var(--knv-leading-tight);
  letter-spacing: var(--knv-tracking-tight);
  font-weight: var(--knv-weight-medium);
  color: var(--knv-fg-strong);
  text-wrap: balance;
}

.knv-h2 {
  font-size: var(--knv-text-2xl);
  line-height: var(--knv-leading-snug);
  letter-spacing: var(--knv-tracking-snug);
  font-weight: var(--knv-weight-medium);
  color: var(--knv-fg-strong);
}

.knv-greeting {
  font-size: var(--knv-text-xl);
  line-height: var(--knv-leading-snug);
  font-weight: var(--knv-weight-medium);
  color: var(--knv-fg-strong);
  letter-spacing: var(--knv-tracking-snug);
}

.knv-h3 {
  font-size: var(--knv-text-lg);
  line-height: var(--knv-leading-snug);
  font-weight: var(--knv-weight-medium);
  color: var(--knv-fg-strong);
}

.knv-body {
  font-size: var(--knv-text-base);
  line-height: var(--knv-leading-normal);
  color: var(--knv-fg);
}
.knv-body-sm { font-size: var(--knv-text-sm); color: var(--knv-fg-muted); }

.knv-meta {
  font-size: var(--knv-text-xs);
  line-height: var(--knv-leading-normal);
  color: var(--knv-fg-soft);
  letter-spacing: 0.01em;
}

.knv-eyebrow {
  font-size: var(--knv-text-xs);
  font-weight: var(--knv-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--knv-tracking-wide);
  color: var(--knv-fg-soft);
}

.knv-link {
  color: var(--knv-fg-link);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--knv-fg-link) 35%, transparent);
  transition: border-color var(--knv-dur-fast) var(--knv-ease-out);
}
.knv-link:hover { border-bottom-color: var(--knv-fg-link); }

.knv-mono { font-family: var(--knv-font-mono); font-size: var(--knv-text-sm); }