/* =========================================================================
   Tikeles • Colors & Type
   Premium minimalist POS for small businesses (Spanish-speaking LATAM).
   Use these tokens in every Tikeles surface so the brand stays cohesive.
   ========================================================================= */

/* ---- Webfonts (Google Fonts CDN) ----------------------------------------- */
/* Sora: geometric display, premium edge — used for headings, prices, KPIs.
   Inter: clean workhorse — used for body, UI labels, microcopy.
   JetBrains Mono: tabular figures for receipts, SKUs, ticket numbers.
   If you self-host, drop the .woff2 files in /fonts/ and update src. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* =========================================================================
   1. COLOR TOKENS
   ========================================================================= */
:root {
  /* — Brand: Violet ramp ————————————————————————————————————————————————— */
  --violet-50:  #F2EEFF;
  --violet-100: #E3DBFF;
  --violet-200: #C7B6FF;
  --violet-300: #A88EFF;
  --violet-400: #8B70FF;
  --violet-500: #6B4BFF;  /* primary action — buttons, links, focus */
  --violet-600: #5837F0;  /* primary hover */
  --violet-700: #4524D6;  /* primary press */
  --violet-800: #3315A8;
  --violet-900: #1F0A6E;

  /* — Ink: Near-black navy ramp ————————————————————————————————————————— */
  --ink-50:  #F7F7FB;     /* page background (light) */
  --ink-100: #EEEEF5;     /* surface alt */
  --ink-200: #DCDCE8;     /* hairline border */
  --ink-300: #B7B7CB;     /* muted icon */
  --ink-400: #8A8AA3;     /* placeholder, helper */
  --ink-500: #5F5F7A;     /* secondary text */
  --ink-600: #3F3F58;     /* primary text on light */
  --ink-700: #232338;
  --ink-800: #15152A;     /* surface (dark) */
  --ink-900: #0A0B1F;     /* page background (dark) */
  --ink-950: #050617;     /* deeper void / shadows */

  /* — Semantic accents ——————————————————————————————————————————————————— */
  --success-500: #22C55E; /* "Free" plan, paid status, positive deltas */
  --success-100: #DCFCE7;
  --warning-500: #F5C518; /* "Premium" plan crown, alerts */
  --warning-100: #FEF3C7;
  --danger-500:  #EF4444; /* errors, refunds, destructive */
  --danger-100:  #FEE2E2;
  --info-500:    #3B82F6;
  --info-100:    #DBEAFE;

  /* — Surfaces / structural ————————————————————————————————————————————— */
  --bg:           var(--ink-50);
  --bg-elevated:  #FFFFFF;
  --bg-inverted:  var(--ink-900);
  --surface:      #FFFFFF;
  --surface-alt:  var(--ink-100);
  --border:       var(--ink-200);
  --border-strong:var(--ink-300);
  --divider:      rgba(15, 15, 40, 0.06);

  /* — Foreground ————————————————————————————————————————————————————————— */
  --fg:           var(--ink-900);     /* primary text */
  --fg-muted:     var(--ink-500);     /* secondary text */
  --fg-subtle:    var(--ink-400);     /* helper / placeholder */
  --fg-inverted:  #FFFFFF;
  --fg-brand:     var(--violet-500);

  /* — Gradients (use sparingly — hero, premium emphasis) ————————————————— */
  --grad-brand:   linear-gradient(135deg, #8B70FF 0%, #4524D6 100%);
  --grad-brand-soft: linear-gradient(135deg, #F2EEFF 0%, #E3DBFF 100%);
  --grad-ink:     linear-gradient(180deg, #15152A 0%, #0A0B1F 100%);
  --grad-receipt-fade: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);

  /* — Focus ring — uniform across all interactives —————————————————————— */
  --focus-ring: 0 0 0 3px rgba(107, 75, 255, 0.35);

  /* =====================================================================
     2. TYPOGRAPHY TOKENS
     ===================================================================== */
  --font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* Fluid type scale — minor third with a tighter display jump */
  --fs-12: 0.75rem;   /* 12 — micro / caption */
  --fs-13: 0.8125rem; /* 13 — labels */
  --fs-14: 0.875rem;  /* 14 — body small */
  --fs-15: 0.9375rem; /* 15 — body */
  --fs-16: 1rem;      /* 16 — body large */
  --fs-18: 1.125rem;  /* 18 — lead */
  --fs-20: 1.25rem;   /* 20 — h5 */
  --fs-24: 1.5rem;    /* 24 — h4 */
  --fs-30: 1.875rem;  /* 30 — h3 */
  --fs-36: 2.25rem;   /* 36 — h2 */
  --fs-48: 3rem;      /* 48 — h1 */
  --fs-60: 3.75rem;   /* 60 — display */
  --fs-72: 4.5rem;    /* 72 — hero */

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;  /* uppercase eyebrows */

  /* =====================================================================
     3. SPACING & RADIUS
     ===================================================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --radius-xs: 6px;
  --radius-sm: 10px;   /* chips, inline tags */
  --radius-md: 14px;   /* inputs, small buttons */
  --radius-lg: 18px;   /* cards, primary buttons */
  --radius-xl: 24px;   /* feature cards, modals */
  --radius-2xl: 32px;  /* hero containers */
  --radius-pill: 999px;

  /* =====================================================================
     4. ELEVATION (subtle, layered — no heavy drop shadows)
     ===================================================================== */
  --shadow-xs: 0 1px 2px rgba(15, 15, 40, 0.06);
  --shadow-sm: 0 2px 6px rgba(15, 15, 40, 0.06), 0 1px 2px rgba(15, 15, 40, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 15, 40, 0.08), 0 2px 6px rgba(15, 15, 40, 0.04);
  --shadow-lg: 0 20px 48px rgba(15, 15, 40, 0.12), 0 4px 12px rgba(15, 15, 40, 0.06);
  --shadow-xl: 0 32px 80px rgba(15, 15, 40, 0.18), 0 8px 24px rgba(15, 15, 40, 0.08);
  --shadow-glow-violet: 0 12px 40px rgba(107, 75, 255, 0.35);
  --shadow-glow-warning: 0 12px 40px rgba(245, 197, 24, 0.30);
  --shadow-inset-hairline: inset 0 0 0 1px rgba(255,255,255,0.06);

  /* =====================================================================
     5. MOTION (premium, restrained)
     ===================================================================== */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);     /* default UI ease */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);     /* page transitions */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* tactile interactions */

  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;
  --dur-page:   520ms;
}

/* =========================================================================
   DARK SURFACE (apply via .dark or media query if you want auto)
   ========================================================================= */
.dark, [data-theme="dark"] {
  --bg:          var(--ink-900);
  --bg-elevated: var(--ink-800);
  --surface:     var(--ink-800);
  --surface-alt: var(--ink-700);
  --border:      rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
  --divider:     rgba(255,255,255,0.06);
  --fg:          #FFFFFF;
  --fg-muted:    rgba(255,255,255,0.66);
  --fg-subtle:   rgba(255,255,255,0.42);
  --fg-inverted: var(--ink-900);
}

/* =========================================================================
   6. SEMANTIC TYPOGRAPHY (use these classes / element styles directly)
   ========================================================================= */
.tk-display, .tk-h1, .tk-h2, .tk-h3, .tk-h4, .tk-h5 {
  font-family: var(--font-display);
  color: var(--fg);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  text-wrap: balance;
}
.tk-display { font-size: var(--fs-72); letter-spacing: var(--tracking-tighter); font-weight: var(--fw-black); }
.tk-h1      { font-size: var(--fs-60); letter-spacing: var(--tracking-tighter); font-weight: var(--fw-bold); }
.tk-h2      { font-size: var(--fs-48); }
.tk-h3      { font-size: var(--fs-36); }
.tk-h4      { font-size: var(--fs-24); line-height: var(--lh-snug); }
.tk-h5      { font-size: var(--fs-20); line-height: var(--lh-snug); font-weight: var(--fw-semibold); }

.tk-lead   { font-family: var(--font-body); font-size: var(--fs-20); line-height: var(--lh-relaxed); color: var(--fg-muted); font-weight: var(--fw-regular); }
.tk-body   { font-family: var(--font-body); font-size: var(--fs-15); line-height: var(--lh-normal); color: var(--fg); font-weight: var(--fw-regular); }
.tk-body-sm{ font-family: var(--font-body); font-size: var(--fs-14); line-height: var(--lh-normal); color: var(--fg-muted); }
.tk-caption{ font-family: var(--font-body); font-size: var(--fs-12); line-height: var(--lh-snug); color: var(--fg-subtle); }
.tk-label  { font-family: var(--font-body); font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--fg); letter-spacing: 0.01em; }

.tk-eyebrow{
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-muted);
}

.tk-price  {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tighter);
  line-height: 1;
}
.tk-mono   { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* baseline element resets (opt-in via .tk-prose) */
.tk-prose { font-family: var(--font-body); color: var(--fg); line-height: var(--lh-normal); }
.tk-prose h1 { font: var(--fw-bold) var(--fs-48)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-tighter); margin: 0 0 var(--space-4); }
.tk-prose h2 { font: var(--fw-bold) var(--fs-36)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-tight); margin: var(--space-10) 0 var(--space-3); }
.tk-prose h3 { font: var(--fw-semibold) var(--fs-24)/var(--lh-snug) var(--font-display); margin: var(--space-8) 0 var(--space-2); }
.tk-prose p  { margin: 0 0 var(--space-4); }