/* ============================================================
   Panel Pro Design System — global entry point
   Consumers link THIS file. Imports only.
   ============================================================ */

/* ============================================================
   Panel Pro — Webfonts
   Loaded from Google Fonts CDN. SUBSTITUTION NOTE: the brand has
   no licensed display font on file — Sora (geometric, premium)
   and Manrope (clean UI) are tasteful stand-ins. Replace the
   @import below with self-hosted @font-face if brand fonts arrive.
   ============================================================ */

/* ============================================================
   Panel Pro — Color tokens
   Premium minimalist: satin gold primary + warm charcoal neutrals
   ============================================================ */

:root {
  /* ---- Gold (brand) ---------------------------------------- */
  --gold-50:  #FBF6EC;
  --gold-100: #F4E7CC;
  --gold-200: #E8CD98;
  --gold-300: #D8B065;
  --gold-400: #C99A45;
  --gold-500: #BA8331;  /* brand mark color */
  --gold-600: #9C6C25;
  --gold-700: #7C551D;
  --gold-800: #5A3E16;
  --gold-900: #3B2A10;

  /* ---- Warm neutral / charcoal ----------------------------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAFAF8;
  --neutral-100: #F4F4F0;
  --neutral-200: #E8E8E2;
  --neutral-300: #D4D4CC;
  --neutral-400: #A9A9A0;
  --neutral-500: #7C7C72;
  --neutral-600: #59594F;
  --neutral-700: #3C3C36;
  --neutral-800: #262623;
  --neutral-900: #1A1A18;
  --neutral-950: #111110;

  /* ---- Semantic status (delivery states) ------------------- */
  --green-500:  #2E9E6B;  /* ready / delivered */
  --green-50:   #E7F5EE;
  --amber-500:  #D9883B;  /* preparing / in transit */
  --amber-50:   #FBF0E2;
  --red-500:    #D2453B;  /* late / cancelled */
  --red-50:     #FAE8E6;
  --blue-500:   #3B7DD9;  /* info / new */
  --blue-50:    #E8F1FB;

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */

  /* Brand */
  --brand:          var(--gold-500);
  --brand-hover:    var(--gold-600);
  --brand-active:   var(--gold-700);
  --brand-soft:     var(--gold-100);
  --brand-soft-bg:  var(--gold-50);
  --on-brand:       #FFFFFF;          /* text/icons on a gold fill */

  /* Surfaces — light app */
  --bg-base:        var(--neutral-50);
  --bg-subtle:      var(--neutral-100);
  --surface-card:   var(--neutral-0);
  --surface-raised: var(--neutral-0);
  --surface-sunken: var(--neutral-100);

  /* Surfaces — dark / premium */
  --surface-dark:        var(--neutral-950);
  --surface-dark-raised: var(--neutral-900);
  --surface-dark-card:   var(--neutral-800);

  /* Text */
  --text-strong:   var(--neutral-900);
  --text-body:     var(--neutral-700);
  --text-muted:    var(--neutral-500);
  --text-faint:    var(--neutral-400);
  --text-inverse:  var(--neutral-50);
  --text-brand:    var(--gold-700);

  /* Borders & dividers */
  --border-subtle: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-dark:   #2C2C28;
  --border-brand:  var(--gold-500);

  /* Status semantic */
  --status-ready:      var(--green-500);
  --status-ready-bg:   var(--green-50);
  --status-progress:   var(--amber-500);
  --status-progress-bg:var(--amber-50);
  --status-late:       var(--red-500);
  --status-late-bg:    var(--red-50);
  --status-new:        var(--blue-500);
  --status-new-bg:     var(--blue-50);

  /* Focus ring */
  --ring: color-mix(in oklab, var(--gold-500) 55%, transparent);
}

/* ============================================================
   Panel Pro — Typography tokens
   Display: Sora (geometric, premium)  ·  UI/Body: Manrope
   Data/numerics: JetBrains Mono
   ============================================================ */

:root {
  /* Families */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-sans:    'Manrope', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Type scale (1.250 major-third-ish, tuned) */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  15px;   /* base body */
  --text-lg:  17px;
  --text-xl:  20px;
  --text-2xl: 25px;
  --text-3xl: 32px;
  --text-4xl: 42px;
  --text-5xl: 56px;
  --text-6xl: 72px;

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

  /* Line heights */
  --lh-tight:   1.08; /* @kind font */
  --lh-snug:    1.22; /* @kind font */
  --lh-normal:  1.5; /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* Letter spacing */
  --ls-tighter: -0.03em; /* @kind font */
  --ls-tight:   -0.015em; /* @kind font */
  --ls-normal:  0; /* @kind font */
  --ls-wide:    0.02em; /* @kind font */
  --ls-caps:    0.12em; /* @kind font */ /* uppercase eyebrows / labels */

  /* Semantic roles */
  --role-display-font:  var(--font-display);
  --role-display-weight: var(--fw-bold);
  --role-display-ls:    var(--ls-tighter);

  --role-heading-font:  var(--font-display);
  --role-heading-weight: var(--fw-semibold);
  --role-heading-ls:    var(--ls-tight);

  --role-body-font:     var(--font-sans);
  --role-body-weight:   var(--fw-regular);

  --role-label-font:    var(--font-sans);
  --role-label-weight:  var(--fw-semibold);

  --role-eyebrow-ls:    var(--ls-caps);
}

/* ============================================================
   Panel Pro — Spacing, radius, shadow, border, motion tokens
   ============================================================ */

:root {
  /* Spacing — 4px base grid */
  --space-0:  0;
  --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 — soft, matching the rounded-square mark */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   22px;   /* echoes the logo corner */
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* Borders */
  --border-width:   1px;
  --border-width-2: 1.5px;
  --border-width-3: 2px;

  /* Shadows — soft, low-spread, premium (cool-neutral, never black) */
  --shadow-xs:  0 1px 2px rgba(26,26,24,0.06);
  --shadow-sm:  0 1px 3px rgba(26,26,24,0.07), 0 1px 2px rgba(26,26,24,0.04);
  --shadow-md:  0 4px 12px rgba(26,26,24,0.08), 0 1px 3px rgba(26,26,24,0.05);
  --shadow-lg:  0 12px 28px rgba(26,26,24,0.10), 0 4px 8px rgba(26,26,24,0.05);
  --shadow-xl:  0 24px 56px rgba(26,26,24,0.14), 0 8px 16px rgba(26,26,24,0.06);
  /* Gold glow — for emphasis on dark surfaces */
  --shadow-gold: 0 8px 24px rgba(186,131,49,0.28);

  /* Motion */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0.05, 0.36, 1); /* @kind other */
  --ease-spring:cubic-bezier(0.34, 1.4, 0.64, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */
}

* { box-sizing: border-box; }
  html, body { margin: 0; }
  body { font-family: var(--font-sans); background: var(--bg-base); color: var(--text-body); height: 100vh; height: 100dvh; overflow: hidden; }
  #cardapio-root { height: 100vh; height: 100dvh; }
  .stage-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
  .stage-scroll::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: 8px; }
  .screen-scroll::-webkit-scrollbar { width: 0; }
  /* Placeholder bem mais leve que o texto digitado/confirmado, p/ deixar clara a diferença. */
  input::placeholder { color: var(--text-faint); opacity: 0.7; font-style: italic; font-weight: 400; }
@keyframes fadeInAnim { from { opacity: 0; } to { opacity: 1; } }