/* ============================================================
   Каса — 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 off-white,
     surfaces step into warm greige. Ink is near-black warm. */
  --bg:           #FBF9F5;   /* page background */
  --surface:      #F3F0E8;   /* panels, table headers, input fill */
  --surface-2:    #E9E5D9;   /* nested fill, hover, pressed states */
  --pure:         #FFFFFF;   /* cards, dialogs — distinct from --bg */
  --border:       #E3DDCD;   /* hairline dividers, card borders */
  --border-strong:#CCC4AD;   /* stronger outline, toggles-off */

  --ink:          #1B1814;   /* primary text + primary action */
  --ink-2:        #4A4338;   /* secondary text */
  --ink-3:        #8A8170;   /* tertiary / muted labels */
  --ink-4:        #B8B09C;   /* 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:       #1B1814;
  --accent-on:    #FFFFFF;
  --accent-hover: #2A2620;   /* primary button hover */

  /* ---------- Semantic ---------- */
  --positive:      #2D7A4F;  --positive-soft: #E3F0E8;
  --warn:          #B86D12;  --warn-soft:     #F7E5C8;
  --danger:        #B73A23;  --danger-soft:   #F4DCD4;
  --info:          #2F5DAB;  --info-soft:     #DDE6F6;

  /* category accents (avatars for products & sale points) */
  --cat-coffee:  #6B3E21;  --cat-coffee-soft:  #EAD9C6;
  --cat-drinks:  #2F5DAB;  --cat-drinks-soft:  #D5E0F3;
  --cat-bakery:  #B86D12;  --cat-bakery-soft:  #F4E2C0;
  --cat-dessert: #A83478;  --cat-dessert-soft: #F0D5E4;
  --cat-snacks:  #2D7A4F;  --cat-snacks-soft:  #D6E8DD;
  --cat-weight:  #4A4338;  --cat-weight-soft:  #E6E0D0;

  /* ---------- Radii ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;   /* default for buttons, cards, inputs */
  --r-lg: 18px;   /* modals, dialogs */
  --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 2px rgba(27,24,20,.05);
  --shadow-md:  0 4px 14px rgba(27,24,20,.07);  /* popovers */
  --shadow-lg:  0 24px 60px rgba(20,17,12,.28);  /* 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:        800 21px/1.15 var(--font-sans);   /* page titles */
  --t-h2:        800 18px/1.2  var(--font-sans);   /* modal / section */
  --t-h3:        700 16px/1.3  var(--font-sans);   /* card titles */
  --t-body:      600 13px/1.45 var(--font-sans);   /* default body */
  --t-body-strong:700 13px/1.45 var(--font-sans);
  --t-small:     400 13px/1.4  var(--font-sans);   /* secondary text */
  --t-label:     700 11.5px/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; }