/* TapShop — Design Tokens (Warm Teal palette)
 * Light theme primary. Dark theme placeholder values included so a future
 * [data-theme="dark"] root can be added without touching component styles. */

:root {
  /* ── Brand ─────────────────────────────────────────── */
  --brand-primary:        #0E7C7B;   /* warm teal — main CTA */
  --brand-primary-hover:  #0A5F5E;
  --brand-primary-press:  #074747;
  --brand-secondary:      #CFE9E7;   /* soft teal — secondary fills */
  --brand-tint:           #E3F2F1;   /* page tints, soft block bg */
  --brand-tint-strong:    #C9E2E0;

  /* ── Warm accent (повтор / позитивные подсветки) ─── */
  --accent-warm:          #F2994A;
  --accent-warm-bg:       #FCEEDC;
  --accent-warm-border:   #F5D1A8;
  --accent-warm-ink:      #B45309;

  /* ── Semantic ──────────────────────────────────────── */
  --success:              #16A34A;
  --success-bg:           #E3F4EA;
  --success-border:       #B7E4C6;
  --success-ink:          #15803D;

  --warning:              #E0A82E;
  --warning-bg:           #FBF1D8;
  --warning-border:       #EFD89A;
  --warning-ink:          #92660C;

  --danger:               #DC4C4C;
  --danger-bg:            #FBE6E6;
  --danger-border:        #F2C4C4;
  --danger-ink:           #B3271E;

  --info:                 #0E7C7B;   /* align with brand */
  --info-bg:              #E3F2F1;
  --info-border:          #CFE9E7;
  --info-ink:             #0A5F5E;

  /* ── Text ──────────────────────────────────────────── */
  --text-primary:         #14302F;
  --text-secondary:       #5C6B6A;
  --text-tertiary:        #93A09F;
  --text-placeholder:     #B0BAB9;
  --text-on-brand:        #FFFFFF;
  --text-inverse:         #FFFFFF;

  /* ── Surfaces & borders ───────────────────────────── */
  --surface:              #FFFFFF;
  --surface-raised:       #FFFFFF;
  --surface-sunken:       #F1F6F5;
  --surface-app:          #F6FAF9;
  --border:               #E2EBEA;
  --border-strong:        #CFD9D8;
  --divider:              #E8EFEE;
  --overlay:              rgba(20, 48, 47, 0.55);

  /* ── Phone bezel (used by device frames) ──────────── */
  --bezel:                #0E2A29;

  /* ── Spacing scale (4-base) ───────────────────────── */
  --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;

  /* ── Radii ─────────────────────────────────────────── */
  --r-sm:  6px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* ── Shadows (restrained — trust over flash) ─────── */
  --shadow-1: 0 1px 2px rgba(20, 48, 47, 0.04), 0 0 0 1px rgba(20, 48, 47, 0.04);
  --shadow-2: 0 2px 8px rgba(20, 48, 47, 0.06), 0 0 0 1px rgba(20, 48, 47, 0.04);
  --shadow-3: 0 8px 24px rgba(20, 48, 47, 0.10), 0 0 0 1px rgba(20, 48, 47, 0.05);
  --shadow-focus: 0 0 0 3px rgba(14, 124, 123, 0.22);

  /* ── Type ──────────────────────────────────────────── */
  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-num:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: 32px;
  --fs-h1:      22px;
  --fs-h2:      18px;
  --fs-h3:      16px;
  --fs-body:    15px;
  --fs-small:   13px;
  --fs-micro:   12px;

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-base:  1.5;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;

  /* ── Motion ────────────────────────────────────────── */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 120ms;
  --t-med:  200ms;
  --t-slow: 320ms;

  /* ── Layout ────────────────────────────────────────── */
  --nav-side-w: 248px;
  --nav-side-w-collapsed: 72px;
  --topbar-h:   64px;
  --tabbar-h:   64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}