/*
 * KPRATIVE Mini App v1.1 — Figma design token layer.
 * Source: docs/FIGMA_V1_1_CLAUDE_IMPLEMENTATION_GUIDE.md Sections 10-11,14
 * Figma file: KPRATIVE — Quiet Route v1 (sYpf4X6bFax5vjk93yrovi)
 * Semantic variable collection: VariableCollectionId:36:15 (Light 36:1 / Dark 36:3)
 *
 * Values below were read directly from Figma's own resolved variable
 * bindings (get_variable_defs on real screen/component nodes: Today
 * 126:3615/126:3694, Settings 420:2/421:80, States board 430:2, BottomNav
 * 62:328, NavItem 61:341) -- not sampled from screenshots.
 *
 * This app's existing theme toggle already uses data-theme="day"|"night"
 * (Sun/Moon icons, i18n keys theme.to_day/theme.to_night) -- kept as-is
 * per the guide's own instruction not to invent a third theme; "day" IS
 * Figma Light mode and "night" IS Figma Dark mode, same two modes.
 *
 * Three token slots (icon-active, icon-muted, nav-label-muted) could not
 * be resolved to a DISTINCT value from any sampled node -- every sample
 * showed icon-active/nav-label-active converging on the same strong
 * color, and no sampled component revealed a separate "muted" icon
 * state. Marked FLAGGED below; verify against an explicit disabled/muted
 * icon instance (e.g. a Calendar month-nav arrow at a range boundary)
 * before relying on them for a genuinely distinct visual state.
 * color/success (dark) is likewise a principled derivation, not a
 * directly sampled value -- flagged.
 */

:root {
  /* ---- v1.1 primitives (Section 10 hex reference) ---- */
  --kp-ivory-50: #F7F1E6;
  --kp-ivory-100: #EFE6D7;
  --kp-forest-950: #0B1814;
  --kp-forest-900: #10231D;
  --kp-forest-800: #17362C;
  --kp-forest-700: #245040;
  --kp-sage-500: #788B70;
  --kp-sand-400: #C9AF82;
  --kp-clay-500: #B76045;
  --kp-ochre-500: #B68A40;
  --kp-stone-300: #D9D0C2;
  --kp-stone-600: #746F67;
  --kp-wine-600: #75464B;
  --kp-white-100: #FFFDF8;
  --kp-black-900: #0A0C0B;

  /* ---- semantic tokens: Light (day) ---- */
  --kp-background: var(--kp-ivory-50);
  --kp-surface: var(--kp-white-100);
  --kp-surface-raised: var(--kp-ivory-100);
  --kp-text-primary: var(--kp-forest-950);
  --kp-text-secondary: var(--kp-stone-600);
  --kp-text-muted: #5C6E63; /* = nav-label-default; no distinct text-muted sample */
  --kp-border-subtle: var(--kp-stone-300);
  --kp-accent-primary: var(--kp-forest-800);
  --kp-energy-1: var(--kp-sage-500);
  --kp-energy-2: var(--kp-ochre-500);
  --kp-energy-3: var(--kp-clay-500);
  /* Task priority is now the ONLY task-color system (PRIORITY-UI-ENERGY-
     AUTO-001, superseding PRIORITY-SEMANTICS-001's "P0 stays plain text"
     decision). P1/P2/P3 reuse the SAME clay/ochre/sage hexes as
     --kp-energy-* above -- those are just color values, not semantically
     bound to energy -- but through their OWN alias so a priority badge
     never shares a class or token name with EnergyIndicator (tasks.css's
     "never use as priority/urgency/status" warning stays true). Identical
     in both modes, same as --kp-energy-*: no dark-mode override needed
     below.
     P0 (critical/urgent) deliberately does NOT reuse a saturated hue --
     criticality is carried by the "!" mark, not by a fourth strong color,
     per this ticket's explicit instruction against inventing a new
     saturated warning color. It reuses the existing warm ivory/stone
     primitives (no new hex introduced) as a neutral "milk" marker, kept
     identical in both themes the same way --kp-hero-text-* is -- a light
     chip reads clearly against a dark surface in night mode without
     needing a separate override. */
  --kp-priority-0: var(--kp-ivory-100); /* P0 = critical/urgent, neutral milk marker */
  --kp-priority-0-border: var(--kp-stone-300);
  --kp-priority-0-mark: var(--kp-forest-800); /* the "!" glyph color */
  --kp-priority-1: var(--kp-clay-500); /* P1 = high, red */
  --kp-priority-2: var(--kp-ochre-500); /* P2 = medium, yellow */
  --kp-priority-3: var(--kp-sage-500); /* P3 = low, green */
  --kp-success: var(--kp-forest-700);
  --kp-warning: var(--kp-ochre-500);
  --kp-recovery: var(--kp-wine-600);
  --kp-overlay-photo: var(--kp-forest-950);
  --kp-icon-default: #122E21;
  --kp-icon-active: #122E21; /* FLAGGED: same as icon-default in every sample */
  --kp-icon-muted: #5C6E63; /* FLAGGED: derived from nav-label-default */
  --kp-nav-label-default: #5C6E63;
  --kp-nav-label-active: #122E21;
  --kp-nav-label-muted: #5C6E63; /* FLAGGED: no distinct sample found */
  /* TASK 13/N UI HOTFIX #3: dedicated tokens for Settings card
     surface/border, distinct from the shared --kp-surface-raised/
     --kp-border-subtle (used broadly elsewhere -- lang options, toggle
     track, timezone select -- and left untouched here to avoid an
     unrelated blast radius). Light defaults to the existing pair
     unchanged; only the dark override below actually differs. */
  --kp-settings-card-bg: var(--kp-surface-raised);
  --kp-settings-card-border: var(--kp-border-subtle);
  --kp-hero-text-primary: var(--kp-white-100); /* shared warm-light value, both modes */
  --kp-hero-text-secondary: rgba(255, 253, 248, 0.72); /* FLAGGED: derived opacity variant */

  /* ---- canonical geometry (Section 14) ---- */
  --kp-radius-20: 20px;
  --kp-width-compact: 342px;
  --kp-bottomnav-w: 362px;
  --kp-bottomnav-h: 82px;
  --kp-hero-w: 342px;
  --kp-hero-h: 214px;
  --kp-hero-safe-w: 302px;
  --kp-hero-safe-h: 74px;
  --kp-energymeter-w: 342px;
  --kp-energymeter-h: 96px;
  --kp-todayrow-w: 342px;
  --kp-todayrow-h: 104px;
  --kp-taskrow-h: 76px;
  --kp-datecell-w: 40px;
  --kp-datecell-h: 44px;
  --kp-timegrid-w: 320px;
  --kp-timegrid-h: 791px;
  --kp-settingsrow-w: 322px;
  --kp-settingsrow-h: 76px;
  --kp-toggle-w: 44px;
  --kp-toggle-h: 26px;
  --kp-icon-box: 22px;
  --kp-icon-stroke: 1.7px;

  /* BottomNav/NavItem geometry (get_design_context on 62:328) -- distinct
     from the general --kp-radius-20, this component has its own 24px
     corner radius.
     TASK 13/N UI HOTFIX: pad-x/gap trimmed from the original Figma-sampled
     16px/2px so all five RU labels ("Календарь", "Настройки") fit their
     NavItem on one line at 320-393px -- see shell.css .kp-navitem__label
     for the matching label-typography half of this fix. */
  --kp-bottomnav-gap: 0px;
  --kp-bottomnav-pad-x: 8px;
  --kp-bottomnav-pad-y: 9px;
  --kp-bottomnav-radius: 24px;
  --kp-navitem-radius: 12px;
  --kp-navitem-gap: 6px;
  --kp-appheader-gap: 4px;
}

:root[data-theme="night"] {
  --kp-background: var(--kp-forest-950);
  --kp-surface: var(--kp-forest-900);
  --kp-surface-raised: var(--kp-forest-800);
  --kp-text-primary: var(--kp-ivory-50);
  --kp-text-secondary: var(--kp-stone-300);
  --kp-text-muted: #B8C9BD;
  --kp-border-subtle: var(--kp-forest-700);
  --kp-accent-primary: var(--kp-sage-500);
  /* energy-1/2/3, warning, recovery: identical in both modes per guide */
  --kp-success: var(--kp-sage-500); /* FLAGGED: principled derivation, not directly sampled */
  --kp-overlay-photo: var(--kp-black-900);
  --kp-icon-default: #F7F2E3;
  --kp-icon-active: #F7F2E3; /* FLAGGED: same pattern as light mode */
  --kp-icon-muted: #B8C9BD; /* FLAGGED */
  --kp-nav-label-default: #B8C9BD;
  --kp-nav-label-active: #F7F2E3;
  --kp-nav-label-muted: #B8C9BD; /* FLAGGED */
  /* TASK 13/N UI HOTFIX #3: real Telegram WebView showed dark-mode
     Settings cards fusing into one block -- page(950)/card(800) measure
     only ~1.4:1 luminance contrast, too close for a real mobile display.
     Reusing the SAME existing forest primitives, just re-paired: the
     card fill moves to forest-700 (the lightest of the four, previously
     only used for border-subtle -- unaffected globally, since this pair
     is Settings-card-only) for real separation from the page (~2:1), and
     the card's own border drops to forest-800 (the *previous* card
     fill) for a quiet recessed edge, darker than the fill it outlines.
     No new color invented; --border-subtle/--surface-raised themselves
     are untouched, so every other dark-mode consumer (toggle-off track,
     lang-option border, timezone-select border, sheet/bottomnav) is
     unaffected. */
  --kp-settings-card-bg: var(--kp-forest-700);
  --kp-settings-card-border: var(--kp-forest-800);
  /* hero-text-primary/secondary: unchanged -- Hero sits on a photo overlay
     regardless of app theme ("shared warm light values" per guide §10). */
}

/* ---- typography contract (Section 11) ----
   Fraunces variable font needs explicit SOFT=0/WONK=1 axis settings;
   these are not exposed as plain CSS properties. Google Fonts request
   (index.html) must include opsz,wght,SOFT,WONK so both weights used
   here (400, 600) are actually served. */
.kp-type-display-date {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: -0.02em;
}
.kp-type-display-place {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -0.01em;
}
.kp-type-ui-title {
  font-family: "Manrope", Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.01em;
}
.kp-type-ui-body {
  font-family: "Manrope", Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
}
.kp-type-ui-label {
  font-family: "Manrope", Arial, sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.01em;
}
.kp-type-ui-micro {
  font-family: "Manrope", Arial, sans-serif;
  font-weight: 700;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.06em;
}
/* TASK 13/N UI HOTFIX: 11px->10px + a slight letter-spacing tighten,
   scoped to this BottomNav-only class (verified as its only consumer),
   so "Календарь"/"Настройки" fit one line without shrinking application
   typography elsewhere. */
.kp-type-nav-label {
  font-family: "Manrope", Arial, sans-serif;
  font-weight: 600;
  font-size: 10px;
  line-height: 13px;
  letter-spacing: -0.01em;
}

/* ---- icon rendering: canonical 22x22 monoline vectors, colored via
   `color` (SVGs use stroke/fill="currentColor" -- see assets/icons/). ---- */
.kp-icon {
  display: inline-flex;
  width: var(--kp-icon-box);
  height: var(--kp-icon-box);
  color: var(--kp-icon-default);
  flex: none;
}
.kp-icon svg { display: block; width: 100%; height: 100%; }
.kp-icon--active { color: var(--kp-icon-active); }
.kp-icon--muted { color: var(--kp-icon-muted); }