/* =============================================================
   meinInventar — Design Tokens
   Colors, Type, Spacing, Radius, Shadows, Motion
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Funnel+Display:wght@400;500;600;700;800&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------- TYPE FAMILIES ----------
     Display: Funnel Display — geometric, industrial, slight character
     Body/UI: Geist — clean, modern, optimized for screens
     Mono:    Geist Mono — for container IDs, item codes, GPS, data
  */
  --font-display: "Funnel Display", "Inter Tight", system-ui, sans-serif;
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  /* ---------- TYPE SCALE ----------
     Slightly compressed scale — this is a working tool, not marketing.
     Display sizes are reserved for marketing/onboarding screens.
  */
  --text-2xs: 11px;   /* metadata, IDs, fine print */
  --text-xs:  12px;   /* labels, captions */
  --text-sm:  13px;   /* secondary text, dense lists */
  --text-base: 15px;  /* default body */
  --text-md:  17px;   /* emphasized body */
  --text-lg:  20px;   /* card titles */
  --text-xl:  24px;   /* section headings */
  --text-2xl: 30px;   /* page titles */
  --text-3xl: 38px;   /* screen headers */
  --text-4xl: 52px;   /* marketing display */
  --text-5xl: 72px;   /* hero / onboarding */

  --leading-tight: 1.1;
  --leading-snug:  1.25;
  --leading-normal: 1.45;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em;

  /* ---------- COLORS — PRIMITIVES ---------- */

  /* Ink — primary brand color, near-black navy with steel undertone */
  --ink-50:  #F4F6F8;
  --ink-100: #E3E8EE;
  --ink-200: #C5CFDA;
  --ink-300: #97A6B6;
  --ink-400: #6A7B8E;
  --ink-500: #475669;
  --ink-600: #2F3D4F;
  --ink-700: #1D2A3A;
  --ink-800: #131E2B;
  --ink-900: #0E1A24;  /* primary text & brand mark */
  --ink-950: #07101A;

  /* Paper — warm off-white surface tones, the "industrial label" feel */
  --paper-0:   #FFFFFF;
  --paper-50:  #FBF8F3;  /* canvas — default page background */
  --paper-100: #F5F1E9;
  --paper-200: #ECE6D9;
  --paper-300: #D9D1BF;

  /* Rust — container orange. Used for primary CTA + warnings only.
     Inspired by shipping container paint that's been weathered. */
  --rust-50:  #FDF3EE;
  --rust-100: #FADBC9;
  --rust-200: #F4B393;
  --rust-300: #ED8559;
  --rust-400: #DD632F;
  --rust-500: #C84A1F;  /* primary accent */
  --rust-600: #A93B17;
  --rust-700: #832D11;
  --rust-800: #5F210C;
  --rust-900: #3E1707;

  /* Pacific — used EXCLUSIVELY for AI-related features
     (analyse, suggestions, recognised). Calm, computational, blue. */
  --pacific-50:  #ECF4FB;
  --pacific-100: #CFE2F4;
  --pacific-200: #9FC4E8;
  --pacific-300: #6BA4DA;
  --pacific-400: #3D86C9;
  --pacific-500: #1F6BB3;
  --pacific-600: #155592;
  --pacific-700: #0F4170;
  --pacific-800: #0A2E50;
  --pacific-900: #061F38;

  /* Semantic */
  --success-50:  #ECF8EE;
  --success-500: #2F9E44;
  --success-700: #1E6E2E;

  --warning-50:  #FEF6E7;
  --warning-500: #E5A100;
  --warning-700: #966800;

  --danger-50:   #FBECEC;
  --danger-500:  #D53A3A;
  --danger-700:  #8E2222;

  /* ---------- SEMANTIC ALIASES (light theme default) ---------- */

  /* Surfaces */
  --bg:           var(--paper-50);     /* page background */
  --bg-subtle:    var(--paper-100);    /* alternate row, hover-fill */
  --bg-raised:    var(--paper-0);      /* cards, modals */
  --bg-sunken:    var(--paper-200);    /* inset wells, code blocks */
  --bg-inverse:   var(--ink-900);

  /* Foreground / text */
  --fg-1: var(--ink-900);   /* primary text */
  --fg-2: var(--ink-700);   /* secondary text */
  --fg-3: var(--ink-500);   /* tertiary, labels */
  --fg-4: var(--ink-400);   /* placeholder, muted */
  --fg-disabled: var(--ink-300);
  --fg-on-accent: var(--paper-0);
  --fg-on-inverse: var(--paper-50);

  /* Borders / dividers — always hairlines, never thick */
  --border-subtle: #ECE5D7;        /* warm hairline on paper bg */
  --border-default: #D6CDB9;
  --border-strong:  var(--ink-300);
  --border-focus:   var(--pacific-500);

  /* Accents */
  --accent:        var(--rust-500); /* primary CTA, primary brand */
  --accent-hover:  var(--rust-600);
  --accent-press:  var(--rust-700);
  --accent-soft:   var(--rust-50);

  --ai:            var(--pacific-500); /* AI-feature accent */
  --ai-hover:      var(--pacific-600);
  --ai-soft:       var(--pacific-50);

  /* ---------- SPACING ----------
     4px base unit. Compact UI scale. */
  --space-0: 0;
  --space-px: 1px;
  --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 ----------
     Mostly modest — this is an industrial app, not a candy app. */
  --radius-none: 0;
  --radius-xs: 3px;     /* badges, micro chips */
  --radius-sm: 6px;     /* inputs, buttons */
  --radius-md: 10px;    /* cards */
  --radius-lg: 14px;    /* modals, sheets */
  --radius-xl: 20px;    /* hero surfaces, onboarding */
  --radius-pill: 999px; /* tags, status pills, FAB */

  /* ---------- BORDERS ---------- */
  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* ---------- SHADOWS ----------
     Restrained. Most depth comes from borders, not shadow.
     Use shadow-1 for floating cards, shadow-2 for popovers,
     shadow-3 for modals / sheets. Never combine. */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(14, 26, 36, 0.04),
              0 1px 1px rgba(14, 26, 36, 0.03);
  --shadow-2: 0 4px 12px rgba(14, 26, 36, 0.08),
              0 1px 2px rgba(14, 26, 36, 0.04);
  --shadow-3: 0 24px 48px -12px rgba(14, 26, 36, 0.18),
              0 8px 16px -8px rgba(14, 26, 36, 0.10);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6),
                  inset 0 -1px 0 rgba(14, 26, 36, 0.04);
  --shadow-focus: 0 0 0 3px rgba(31, 107, 179, 0.25);
  --shadow-focus-accent: 0 0 0 3px rgba(200, 74, 31, 0.25);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* ---------- LAYOUT ---------- */
  --container-max: 1200px;
  --sidebar-width: 260px;
  --topbar-height: 56px;
  --mobile-nav-height: 64px;
  --touch-target: 44px;     /* mobile minimum hit target */
}

/* ============================================================= */
/* SEMANTIC TYPE STYLES                                          */
/* ============================================================= */

.display-1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.display-2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}
.h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

.body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-1);
}
.body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}
.body-strong {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-base);
  color: var(--fg-1);
}

.label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}

.caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--fg-3);
}

.code, .mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-sm);
  font-feature-settings: "ss02", "cv11";
  color: var(--fg-1);
}

.id-tag {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--fg-2);
  background: var(--bg-sunken);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

/* ============================================================= */
/* BASE RESETS — for use inside artifacts                        */
/* ============================================================= */

.mein-inventar-base, .mein-inventar-base * {
  box-sizing: border-box;
}
.mein-inventar-base {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}