/* =====================================================================
   Verdauungstagebuch — Design Tokens
   Single source of truth. Import once at the app root (e.g. in main.tsx
   or index.css):  @import "./design-system/tokens.css";

   Framework-neutral CSS custom properties. Works with plain CSS,
   CSS Modules, styled-components, or Tailwind v4 @theme (see README).
   ===================================================================== */

:root {
  /* ---- Brand: Navy (structure & primary) ---- */
  --color-navy-900: #0B2135;
  --color-navy-800: #102E49;
  --color-navy-700: #173E61; /* PRIMARY */
  --color-navy-600: #2C5A82;
  --color-navy-500: #4E7CA1;
  --color-navy-300: #9DB6CC;
  --color-navy-100: #DCE6F0;

  /* ---- Brand: Coral (single accent — use sparingly, <=10% of surface) ---- */
  --color-coral-700: #B8421F;
  --color-coral-600: #D74F28; /* ACCENT */
  --color-coral-500: #E15A38;
  --color-coral-300: #F0916F;
  --color-coral-100: #FBE3D9;

  /* ---- Green (trust & success only) ---- */
  --color-green-700: #15784D;
  --color-green-600: #1E9460; /* SUCCESS */
  --color-green-400: #34B27A;
  --color-green-100: #DBF3E6;

  /* ---- Neutrals (warm-tuned slate) ---- */
  --color-slate-700: #33424F;
  --color-slate-600: #51606E;
  --color-slate-500: #6B7A88;
  --color-slate-400: #94A3B0;
  --color-slate-300: #CBD5DE;
  --color-slate-200: #E5EAEF;
  --color-slate-100: #F1F4F7;
  --color-slate-50:  #F8FAFB;

  /* ---- Tracking-category accents ----
     Each of the 5 categories carries its own colour for tiles, modal save
     buttons and chart series. Navy + coral remain the brand; these are
     functional category identifiers only. */
  --cat-meal:      #1E9460; /* Mahlzeit  */
  --cat-meal-bg:   #DCF2E6;
  --cat-drink:     #1B8FB0; /* Getränk   */
  --cat-drink-bg:  #D6EEF5;
  --cat-toilet:    #C2571C; /* Toilette  */
  --cat-toilet-bg: #F7E2D3;
  --cat-wellbeing: #6D4FD6; /* Befinden  */
  --cat-wellbeing-bg:#E7E0FA;
  --cat-sport:     #168A7D; /* Sport     */
  --cat-sport-bg:  #D5EEEB;

  /* ---- Semantic ---- */
  --color-primary:      var(--color-navy-700);
  --color-primary-hover:var(--color-navy-800);
  --color-accent:       var(--color-coral-600);
  --color-accent-hover: var(--color-coral-700);
  --color-success:      var(--color-green-600);
  --color-info:         #2E6FB0;
  --color-warning:      #C7891F;
  --color-error:        #D14343;

  /* ---- Surfaces ---- */
  --bg-marketing:       #F4F2EC; /* cream — marketing pages */
  --bg-marketing-raised:#FBFAF6; /* cards on cream */
  --bg-app:             #FFFFFF; /* app UI */
  --bg-subtle:          #F8FAFB; /* subtle fills, list rows */
  --color-border:       #E5EAEF;
  --color-border-strong:#CBD5DE;

  /* ---- Text ---- */
  --text:        #0B2135;
  --text-muted:  #51606E;
  --text-faint:  #94A3B0;
  --text-on-dark:#FFFFFF;

  /* ---- Typography ---- */
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --text-display: 800 46px/1.04 var(--font-sans); /* hero */
  --text-h1:      800 40px/1.1  var(--font-sans);
  --text-h2:      700 30px/1.15 var(--font-sans);
  --text-h3:      600 21px/1.2  var(--font-sans);
  --text-body:    400 16px/1.6  var(--font-sans);
  --text-small:   500 13.5px/1.5 var(--font-sans);

  --tracking-tight: -0.03em;
  --tracking-eyebrow: 0.13em;

  /* ---- Shape ---- */
  --radius-input: 6px;
  --radius-control: 10px; /* buttons, inputs */
  --radius-card: 16px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 3px rgba(11,33,53,.08);
  --shadow-md: 0 6px 18px rgba(11,33,53,.10);
  --shadow-lg: 0 14px 36px rgba(11,33,53,.16);

  /* ---- Focus ring ---- */
  --ring: 0 0 0 3px rgb(23 62 97 / .16);

  /* ---- Control sizing ---- */
  --control-h-sm: 34px;
  --control-h-md: 44px;  /* default — touch-safe */
  --control-h-lg: 52px;

  /* ---- Icons (lucide) ---- */
  --icon-stroke: 1.75;
}