/* ============================================================
   Каса — Design System Foundations
   Color + Type tokens for the Каса POS & web admin panel.
   Load this file + the Google Fonts link below in any artifact.

   <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet"/>
   ============================================================ */

:root {
  /* ---------- Neutral / ink ramp ----------
     Warm, paper-leaning neutrals. Background is pure white,
     surfaces step into warm greige. Ink is near-black warm. */
  --bg:           #ffffff;   /* page / cards on surface */
  --surface:      #f7f6f3;   /* default panel / input fill */
  --surface-2:    #efede8;   /* nested fill, pressed states */
  --border:       #e6e3dc;   /* hairline dividers, card borders */
  --border-strong:#d4d0c7;   /* stronger outline, toggles-off */

  --ink:          #16140f;   /* primary text + primary action */
  --ink-2:        #4a463d;   /* secondary text */
  --ink-3:        #8b867a;   /* tertiary / muted labels */
  --ink-4:        #b8b3a6;   /* disabled, empty-state glyphs */

  /* ---------- Brand / action ----------
     There is no chromatic brand color — the brand IS the warm
     near-black ink. Primary actions are solid ink on white. */
  --accent:       #16140f;
  --accent-on:    #ffffff;
  --accent-hover: #2a2620;   /* primary button hover */

  /* ---------- Semantic ---------- */
  --positive:      #1f8a4c;  --positive-soft: #e6f3ec;
  --warn:          #c2700a;  --warn-soft:     #fbeed4;
  --danger:        #b8331f;  --danger-soft:   #f6e1dc;
  --info:          #2e5aa8;  --info-soft:     #e2eaf6;

  /* avatar / category accents (used sparingly for people & tags) */
  --av-ink:  #16140f;
  --av-blue: #2e5aa8;
  --av-green:#1f8a4c;
  --av-amber:#c2700a;

  /* ---------- Radii ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;   /* default for buttons, cards, inputs */
  --r-lg: 20px;   /* modals */
  --r-xl: 28px;   /* large dialogs, hero panels */
  --r-pill: 999px;

  /* ---------- Spacing scale (px) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-14: 56px;

  /* ---------- Elevation ----------
     Soft, low, warm-tinted shadows. Used only on floating
     surfaces (modals, toasts, menus). Cards use borders, not shadow. */
  --shadow-sm:  0 1px 3px rgba(22,20,15,.06);
  --shadow-md:  0 12px 28px rgba(0,0,0,.25);   /* toast */
  --shadow-lg:  0 24px 60px rgba(0,0,0,.25);   /* modal */
  --shadow-xl:  0 30px 80px rgba(0,0,0,.50);   /* device frame on stage */

  /* ---------- Type families ---------- */
  --font-sans: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* numerals & money always use mono + tabular figures */
  --num-features: tabular-nums;

  /* ---------- Type ramp ----------
     Manrope, tight tracking on large sizes. Weights: 800 display,
     700 headings, 600 labels/buttons, 500 emphasis, 400 body. */
  --t-display:   800 42px/1.05 var(--font-sans);   /* login greeting, hero */
  --t-h1:        700 26px/1.15 var(--font-sans);   /* page titles */
  --t-h2:        700 20px/1.2  var(--font-sans);   /* modal / section */
  --t-h3:        700 16px/1.3  var(--font-sans);   /* card titles */
  --t-body:      400 14px/1.45 var(--font-sans);   /* default body */
  --t-body-strong:600 14px/1.45 var(--font-sans);
  --t-small:     400 13px/1.4  var(--font-sans);   /* secondary text */
  --t-label:     600 12px/1.3  var(--font-sans);   /* uppercase labels */
  --t-kpi:       800 32px/1.0  var(--font-mono);   /* big numbers */
}

/* ============================================================
   Semantic element defaults — opt in by adding class `kasa`
   to a container, or copy these rules into your artifact.
   ============================================================ */
.kasa, .kasa * { box-sizing: border-box; }

.kasa {
  font: var(--t-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
}

.kasa h1 { font: var(--t-h1); letter-spacing: -0.02em; margin: 0; }
.kasa h2 { font: var(--t-h2); letter-spacing: -0.01em; margin: 0; }
.kasa h3 { font: var(--t-h3); margin: 0; }
.kasa p  { font: var(--t-body); color: var(--ink-2); margin: 0; }

/* uppercase eyebrow / field label */
.kasa .label,
.label-eyebrow {
  font: var(--t-label);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* numerals — money, counts, codes */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: var(--num-features);
  letter-spacing: -0.01em;
}

/* mono code inline */
.kasa code,
.mono { font-family: var(--font-mono); font-size: 0.92em; }