/* ============================================================
   Kidood Design System — Colors & Type tokens
   Source of truth: extracted from app/globals.css in
   github.com/AFielen/Kidood (proprietary, internal).
   ============================================================ */

/* ---------- Fonts (self-hosted Nunito 400–800) ---------- */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('./fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('./fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- Brand: Kidood Green ---------- */
  --kidood:         #2E7D32;  /* primary action, links, focus ring */
  --kidood-dark:    #1B5E20;  /* hover, headings on light */
  --kidood-light:   #4CAF50;  /* accents, gradients */
  --kidood-bg:      #f0f7f0;  /* soft surface (cards, info blocks) */
  --kidood-surface: #e8f5e9;  /* slightly stronger surface */

  /* ---------- Text ---------- */
  --fg-1:           #1a1a2e;  /* primary text (alias of --text) */
  --fg-2:           #5a5a7a;  /* secondary text */
  --fg-3:           #8e8ea0;  /* tertiary / muted */
  --text:           #1a1a2e;
  --text-light:     #5a5a7a;
  --text-muted:     #8e8ea0;

  /* ---------- Surfaces & borders ---------- */
  --bg:             #f7f8fc;  /* page background */
  --bg-card:        #ffffff;  /* card surface */
  --border:         #e2e4ec;

  /* ---------- Functional / status ---------- */
  --success:        #16a34a;
  --success-bg:     #f0fdf4;
  --warning:        #d97706;
  --warning-bg:     #fffbeb;
  --info:           #0891b2;
  --info-bg:        #ecfeff;

  /* Allergen warning (food-safety critical) */
  --allergen-warn:        #e65100;
  --allergen-warn-bg:     #fff3e0;
  --allergen-danger:      #c62828;
  --allergen-danger-bg:   #ffebee;

  /* Cancelled order */
  --storniert-bg:   #f0f0f0;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow:    0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.1), 0 4px 8px -2px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 20px 40px -8px rgba(0, 0, 0, 0.12);

  /* ---------- Radii ---------- */
  --radius:     0.75rem;   /* 12px – buttons, inputs */
  --radius-lg:  1rem;      /* 16px */
  --radius-xl:  1.25rem;   /* 20px – cards */
  --radius-2xl: 1.5rem;    /* 24px – hero cards / sheets */
  --radius-pill: 9999px;   /* badges */

  /* ---------- Transitions ---------- */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --easing-sheet: cubic-bezier(0.32, 0.72, 0, 1);

  /* ---------- Type families ---------- */
  --font-display: 'Nunito', system-ui, -apple-system, sans-serif;
  --font-body:    system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- Type scale (semantic) ----------
     Display family (Nunito) used for headings, buttons, badges, form labels.
     Body family (system stack) used for paragraphs and UI body copy. */
  --fs-display: 1.75rem; /* 28px – page hero title */
  --fs-h1:      1.5rem;  /* 24px */
  --fs-h2:      1.25rem; /* 20px – section / sheet title */
  --fs-h3:      1.125rem;/* 18px */
  --fs-h4:      1rem;    /* 16px – card title */
  --fs-body:    1rem;    /* 16px */
  --fs-sm:      0.875rem;/* 14px – list-row title, secondary body */
  --fs-xs:      0.75rem; /* 12px – badge / meta */
  --fs-2xs:     0.6875rem;/* 11px – uppercase label */

  --lh-tight: 1.2;
  --lh-snug:  1.4;
  --lh-base:  1.6;

  --ls-tight: -0.01em; /* applied to headings */
  --ls-wide:  0.08em;  /* uppercase eyebrow / data-card label */
}

/* ---------- Dark mode (data-theme="dark") ---------- */
[data-theme="dark"] {
  --fg-1: #e8e8f0; --fg-2: #a0a0b8; --fg-3: #6e6e88;
  --text: #e8e8f0; --text-light: #a0a0b8; --text-muted: #6e6e88;
  --bg: #0f0f1a; --bg-card: #1a1a2e; --border: #2e2e44;
  --kidood-bg: #0a2e0a; --kidood-surface: #1a3d1a;
  --success-bg: #052e16; --warning-bg: #451a03; --info-bg: #083344;
  --allergen-warn-bg: #3d1c00; --allergen-danger-bg: #3d0a0a;
  --storniert-bg: #232333;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --shadow:    0 4px 12px -2px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.2);
  --shadow-lg: 0 12px 24px -4px rgba(0,0,0,0.4), 0 4px 8px -2px rgba(0,0,0,0.3);
  --shadow-xl: 0 20px 40px -8px rgba(0,0,0,0.5);
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: 700;
}

/* ---------- Semantic type aliases ---------- */
.t-display { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.t-h1      { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1);      line-height: var(--lh-tight); }
.t-h2      { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2);      line-height: var(--lh-tight); }
.t-h3      { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3);      line-height: var(--lh-snug); }
.t-h4      { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4);      line-height: var(--lh-snug); }
.t-body    { font-family: var(--font-body);    font-weight: 400; font-size: var(--fs-body);    line-height: var(--lh-base); }
.t-sm      { font-family: var(--font-body);    font-weight: 400; font-size: var(--fs-sm);      line-height: var(--lh-snug); }
.t-meta    { font-family: var(--font-body);    font-weight: 400; font-size: var(--fs-xs);      line-height: var(--lh-snug); color: var(--text-muted); }
.t-eyebrow { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xs);     line-height: var(--lh-snug); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); }
.t-mono    { font-family: var(--font-mono);    font-size: var(--fs-sm); }