@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;500;600;700&display=swap');
/* ЗаказГотов — Цвета / Color tokens
   Primary is orange #FF6B00. NEVER use dark blue anywhere. Flat, no gradients. */
:root {
  /* ── Brand / Primary (orange) ── */
  --orange: #FF6B00;          /* primary brand color */
  --orange-d: #E85D00;        /* hover / pressed */
  --orange-light: #FFF3E0;    /* tints, focus rings, wait-badge bg */
  --orange-soft: #FFF3E9;     /* warmer tint for banners */
  --orange-tint: #FFE3CC;     /* stronger tint chip */
  --orange-disabled: #FFD4A3; /* disabled primary button */

  /* ── Ink / Neutrals ── */
  --ink: #2D2D2D;             /* primary text */
  --muted: #8C8C8C;           /* secondary text */
  --line: #E6E6E6;            /* borders, dividers */
  --bg: #FFFFFF;              /* page background */
  --card: #FFFFFF;            /* card surface */
  --surface: #F5F5F5;         /* app shell / tablet background */
  --surface-warm: #FAF8F5;    /* warm row / list background */
  --grey-btn: #9AA3AD;        /* neutral "secondary action" button */
  --grey-btn-d: #828C97;

  /* ── Semantic: success (green) ── */
  --green: #4CAF50;
  --green-d: #3F9C43;
  --green-bg: #E7F8EE;        /* ok-badge background */
  --green-fg: #1C7A43;        /* ok-badge text */

  /* ── Semantic: danger (red) ── */
  --red: #F44336;
  --red-d: #D63B3B;
  --red-bg: #FDECEC;          /* error-badge background */
  --red-fg: #C2342F;          /* error-badge text */

  /* ── Semantic: warning / preparing (amber) ── */
  --amber-bg: #FFF3CD;
  --amber-fg: #7A5B00;
  --amber-line: #F0D070;

  /* ── Cook-time pills (cashier) ── */
  --time-green-bg: #E7F6E9; --time-green-fg: #2E7D32;
  --time-yellow-bg: #FFF3E0; --time-yellow-fg: #B26A00;
  --time-red-bg: #FDECEA;  --time-red-fg: #C62828;

  /* ── Neutral muted badge ── */
  --neutral-bg: #EEEEEE; --neutral-fg: #666666;

  /* ── Semantic aliases ── */
  --text-primary: var(--ink);
  --text-secondary: var(--muted);
  --text-on-brand: #FFFFFF;
  --surface-page: var(--bg);
  --surface-card: var(--card);
  --surface-app: var(--surface);
  --border-default: var(--line);
  --brand: var(--orange);
  --brand-hover: var(--orange-d);
  --focus-ring: var(--orange-light);
}
/* ЗаказГотов — Шрифты / Webfonts
   Comfortaa is used for the logo wordmark and product headings.
   Loaded from Google Fonts CDN (weights 400/500/700). Body text uses the
   native system sans-serif stack (no webfont needed). */

/* ЗаказГотов — Типографика / Typography tokens
   Headings: Comfortaa (rounded, friendly geometric). Body: system sans-serif.
   Mono: codes, order ids, sticker codes. No italics in the brand. */
:root {
  --font-display: 'Comfortaa', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, Arial, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;

  /* Weights */
  --fw-regular: 400; /* @kind other */
  --fw-medium: 600;  /* @kind other */
  --fw-bold: 700;    /* @kind other */
  --fw-extra: 800; /* @kind other */

  /* Type scale (px) */
  --fs-order: 82px;   /* guest order number (hero numeral) */
  --fs-display: 42px; /* dashboard hero metric */
  --fs-h1: 26px;
  --fs-h2: 18px;
  --fs-body: 15px;
  --fs-sub: 14px;
  --fs-small: 13px;
  --fs-caption: 12px;
  --fs-micro: 11px;

  /* Line heights */
  --lh-tight: 1.05;   /* @kind other */
  --lh-snug: 1.18;    /* @kind other */
  --lh-base: 1.5;     /* @kind other */
  --lh-relaxed: 1.65; /* @kind other */

  /* Letter spacing */
  --ls-tight: -0.5px;
  --ls-label: 0.4px;  /* uppercase micro-labels */
}
/* ЗаказГотов — Отступы / Spacing tokens — 4px base grid */
:root {
  --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;

  /* Layout */
  --wrap-max: 960px;       /* portal / landing content width */
  --wrap-narrow: 480px;    /* guest / auth column */
  --page-pad: 20px;        /* horizontal page padding */
  --card-pad: 22px;        /* default card padding */
}
/* ЗаказГотов — Радиусы и формы / Radius & shape tokens
   Flat design: rounded corners, NO gradients. Shadows are soft and subtle only. */
:root {
  --radius-sm: 12px;    /* inputs, small buttons, tabs */
  --radius-md: 14px;    /* inputs (large), list rows */
  --radius: 20px;       /* default card radius */
  --radius-lg: 22px;    /* modal */
  --radius-btn: 28px;   /* pill buttons */
  --radius-pill: 999px; /* badges, full pills */

  /* Subtle elevation — used sparingly. No hard/dark shadows. */
  --shadow-card: 0 6px 20px rgba(0,0,0,.05);
  --shadow-raised: 0 16px 36px rgba(0,0,0,.18); /* hero / floating CTA */
  --shadow-modal: 0 20px 60px rgba(0,0,0,.25);

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1); /* @kind other */
  --dur-fast: .15s;  /* @kind other */
  --dur-press: .05s; /* @kind other */
}