/* ============================================================
   MUSTERBASE DESIGN TOKENS · v1.0
   Brand: Muster (Musterbase) · Hire → Track → Pay
   ============================================================
   Single source of truth for color, type, spacing, motion.
   Flat, solid colors only — no gradients. Slate + Teal.
   Never invent new colors/sizes — pull from these variables.
   ============================================================ */
:root {
  /* COLOR · SLATE · the structural ink ramp */
  --slate-900: #0F172A;   /* deepest — headings on light, app nav bg */
  --slate-800: #1F2A37;   /* BRAND PRIMARY — logo tile, buttons, headers */
  --slate-700: #334155;   /* body strong, secondary surfaces on dark */
  --slate-600: #475569;   /* muted headings */
  --slate-500: #64748B;   /* secondary text */
  --slate-400: #94A3B8;   /* tertiary text, placeholders */
  --slate-300: #CBD5E1;   /* borders on dark, disabled */
  --slate-200: #E2E8F0;   /* dividers, hover fills */
  --slate-100: #EDF2F0;   /* paper, branded surface */

  /* COLOR · TEAL · the signal (CTAs, active, present, success-adjacent) */
  --teal:        #14B89A;  /* primary signal */
  --teal-deep:   #0F766E;  /* hover, text on teal-tint, strokes */
  --teal-dark:   #0B5A54;  /* pressed */
  --teal-soft:   #D5F2EB;  /* chips, active row fill */
  --teal-tint:   #EDF7F4;  /* faint section fills */

  /* COLOR · SURFACES (light mode) */
  --white:      #FFFFFF;    /* primary product surface — cards, forms, tables */
  --white-soft: #FAFCFB;    /* zebra rows, hovers */
  --mist:       #F4F7F6;    /* app page background */
  --paper:      #EDF2F0;    /* branded surface, marketing sections */
  --line:        rgba(15,23,42,0.10);
  --line-soft:   rgba(15,23,42,0.06);
  --line-strong: rgba(15,23,42,0.16);
  --line-ondark: rgba(226,232,240,0.14);

  /* COLOR · ACCENT TINTS · decorative (icon backgrounds, category chips) */
  /* Pair each tint with its -deep variant for icon strokes / text. */
  --tint-mint:   #D5F2EB;  --tint-mint-deep:   #0F766E;  /* attendance, present, active */
  --tint-amber:  #FBEFD4;  --tint-amber-deep:  #8A5A0B;  /* late, pending, payroll-due */
  --tint-rose:   #F7DDD8;  --tint-rose-deep:   #A33A2A;  /* absent, overdue, alerts */
  --tint-sky:    #D9E6F2;  --tint-sky-deep:    #1F5A91;  /* info, links, leave */
  --tint-violet: #E4E0F5;  --tint-violet-deep: #4A3F9E;  /* hiring, candidates */
  --tint-slate:  #E2E8F0;  --tint-slate-deep:  #334155;  /* neutral counts */

  /* COLOR · SEMANTIC · UI states only (never decoration) */
  --success: #0F766E;  --success-soft: #D5F2EB;
  --warn:    #B45309;  --warn-soft:    #FBEFD4;
  --error:   #B83520;  --error-soft:   #F7DDD8;
  --info:    #1F5A91;  --info-soft:    #D9E6F2;

  /* TYPE · families */
  --font-display: "Space Grotesk", "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* TYPE · scale */
  --t-display-l: 56px;   /* hero · weight 700, tracking -0.03em */
  --t-display-m: 40px;   /* section titles · weight 700, tracking -0.02em */
  --t-display-s: 28px;   /* card/page titles · weight 600 */
  --t-title:     20px;   /* sub-section · weight 600 */
  --t-body-l:    18px;   /* lead paragraph */
  --t-body:      16px;   /* default body · weight 400, line-height 1.6 */
  --t-small:     14px;   /* secondary, labels */
  --t-tiny:      12px;   /* captions, badges */

  /* TYPE · weights (two-ish: regular + medium/bold display) */
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;

  /* SPACING · 4px base scale */
  --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; --s-20: 80px; --s-24: 96px;

  /* RADIUS */
  --r-sm: 8px;
  --r-md: 12px;     /* default — inputs, chips */
  --r-lg: 16px;     /* cards */
  --r-xl: 22px;     /* app-icon tile, hero cards */
  --r-pill: 999px;

  /* ELEVATION · flat & subtle (no heavy/colored shadows) */
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.06);
  --shadow-md: 0 4px 14px rgba(15,23,42,0.08);
  --shadow-lg: 0 10px 30px rgba(15,23,42,0.10);

  /* MOTION */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;

  /* LAYOUT */
  --container: 1200px;
  --nav-h: 64px;
  --bottomnav-h: 64px;
}