/* ==========================================================================
   STEMMA DESIGN SYSTEM - CSS DESIGN TOKENS
   Strict adherence to DESIGN.md specification
   Google Fonts: Fugaz One (Display/Headers) + Work Sans (Body/Sub-headers/UI)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fugaz+One&family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

:root {
  /* Brand & Semantic Colors */
  --color-primary: #ff3366;
  --color-primary-hover: #e62255;
  --color-on-primary: #ffffff;
  --color-ink: #18181a;
  --color-on-dark: #f8fafc;
  --color-canvas: #ffffff;
  --color-canvas-soft: #f8fafc;
  --color-surface: #f8fafc;
  --color-hairline: #e2e8f0;
  --color-hairline-dark: #cbd5e1;
  --color-muted: #475569;
  --color-muted-light: #94a3b8;
  --color-accent: #169d4d;
  --color-link: #1586cf;
  --color-link-hover: #0c6ba8;
  --color-error: #d63b25;
  --color-secondary: #7b57d6;

  /* Palette Accents from sc.png Reference */
  --color-bento-pink: #ff3366;
  --color-bento-purple: #7b57d6;
  --color-bento-green: #169d4d;
  --color-bento-yellow: #f59e0b;
  --color-bento-blue: #1586cf;
  --color-bento-cyan: #0ea5e9;
  --color-bento-orange: #ff6b35;
  --color-bento-olive: #84cc16;
  --color-bento-avatar-bg: #eceff3;

  /* Typography Font Families */
  --font-display: 'Fugaz One', cursive, sans-serif;
  --font-body: 'Work Sans', sans-serif;

  /* Typography Scale */
  --text-display: 56px;
  --lh-display: 1.1;
  --ls-display: -1px;
  --fw-display: 400;

  --text-h1: 40px;
  --lh-h1: 1.15;
  --ls-h1: -0.5px;
  --fw-h1: 400;

  --text-h2: 32px;
  --lh-h2: 1.2;
  --ls-h2: 0px;
  --fw-h2: 400;

  --text-h3: 24px;
  --lh-h3: 1.25;
  --ls-h3: 0px;
  --fw-h3: 600;

  --text-h4: 20px;
  --lh-h4: 1.3;
  --ls-h4: 0px;
  --fw-h4: 600;

  --text-body-lg: 18px;
  --lh-body-lg: 1.6;
  --fw-body-lg: 400;

  --text-body-md: 16px;
  --lh-body-md: 1.5;
  --fw-body-md: 400;

  --text-body-sm: 14px;
  --lh-body-sm: 1.5;
  --fw-body-sm: 400;

  --text-button: 16px;
  --lh-button: 1.2;
  --fw-button: 600;

  --text-nav-link: 14px;
  --lh-nav-link: 1.4;
  --fw-nav-link: 500;

  --text-caption: 12px;
  --lh-caption: 1.4;
  --fw-caption: 400;

  /* Rounded Scale */
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 36px;
  --radius-full: 9999px;

  /* Spacing Scale */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 64px;
  --space-section-lg: 96px;

  /* Elevation Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-float: 0 20px 40px -12px rgba(24, 24, 26, 0.12);

  /* Emil Kowalski Animation Easing Curves */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Animation Durations */
  --dur-fast: 150ms;
  --dur-normal: 250ms;
  --dur-slow: 400ms;
  --dur-motion: 600ms;
}

/* Reset and base styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-body);
  color: var(--color-ink);
  background-color: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  line-height: var(--lh-body-md);
  font-size: var(--text-body-md);
  overflow-x: hidden;
}

/* Base Typographic Utility Classes */
.font-display {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
}

.font-body {
  font-family: var(--font-body);
}

h1, .heading-1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  font-weight: var(--fw-h1);
}

h2, .heading-2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: var(--fw-h2);
}

h3, .heading-3 {
  font-family: var(--font-body);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
}

h4, .heading-4 {
  font-family: var(--font-body);
  font-size: var(--text-h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-h4);
}

p, .body-md {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--lh-body-md);
}

.body-lg {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
}

.body-sm {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   FLATICON UICONS OPTICAL CENTERING & STANDARD RESET
   ========================================================================== */
.fi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
}

/* ==========================================================================
   ANTI-SLOP CLEAN BADGES & STATUS TAGS
   No faux comments (//), no decorative bullets (●/•), restrained contrast
   ========================================================================== */
.badge-clean {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.badge-neutral {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  background-color: var(--color-hairline);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
}

.badge-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-hairline-dark);
  background: transparent;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
}

.badge-semantic-success {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  background-color: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
}

.badge-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  background-color: rgba(255, 51, 102, 0.08);
  border: 1px solid rgba(255, 51, 102, 0.2);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
}