/* Shared brand rules load with the HTML shell so public pages do not wait on a route chunk. */
@layer components {
  .marketing-shell {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
      radial-gradient(circle at top left, rgba(210, 171, 136, 0.18), transparent 26rem),
      radial-gradient(circle at top right, rgba(250, 243, 236, 0.85), transparent 24rem),
      linear-gradient(180deg, #f7f0e8 0%, #f5ede5 38%, #efe1d3 100%);
  }

  .marketing-shell--barista-forge {
    --bf-brick: #B4502A;
    --bf-cream: #F4F0E8;
    --bf-charcoal: #2E2E2E;
    --bf-blue: #7DA2B6;
    --bf-olive: #78866B;
    --bf-steel: #6E7274;
    color: var(--bf-charcoal);
    background:
      radial-gradient(circle at 8% 2%, rgba(180, 80, 42, 0.09), transparent 28rem),
      radial-gradient(circle at 92% 20%, rgba(125, 162, 182, 0.12), transparent 30rem),
      linear-gradient(180deg, #f8f3ec 0%, var(--bf-cream) 48%, #eee5da 100%);
  }

  .marketing-shell--barista-forge .brand-primary-button {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #B4502A 0%, #9B3F20 100%);
    box-shadow: 0 12px 28px rgba(180, 80, 42, 0.24);
  }

  .marketing-shell--barista-forge .brand-primary-button::after {
    content: '';
    position: absolute;
    right: -0.75rem;
    top: -1.25rem;
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(244, 240, 232, 0.32);
    border-radius: 52% 48% 58% 42%;
    transform: rotate(28deg);
  }

  .marketing-shell--barista-forge .brand-primary-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(180, 80, 42, 0.3);
  }

  .bf-rough-outline {
    border: 1px solid rgba(180, 80, 42, 0.25);
    box-shadow: 5px 5px 0 rgba(125, 162, 182, 0.18), 0 22px 60px rgba(46, 46, 46, 0.1);
  }

  .barista-product-shell {
    background:
      radial-gradient(circle at 102% -4%, rgba(125, 162, 182, 0.12), transparent 26rem),
      radial-gradient(circle at -8% 96%, rgba(180, 80, 42, 0.07), transparent 30rem),
      #F1EEE9;
  }

  /* Product primitives: scoped so Counter Order and Forge administration keep their own systems. */
  .barista-product-shell [data-ui="card"],
  .barista-product-shell [data-ui="empty-state"],
  .barista-product-shell [data-ui="surface"] {
    border-color: rgba(46, 46, 46, 0.1);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 9px 28px rgba(46, 46, 46, 0.055);
  }

  .barista-product-shell [data-ui="page-header"] {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(46, 46, 46, 0.09);
    border-radius: 1.5rem;
    background:
      radial-gradient(circle at 98% 5%, rgba(125, 162, 182, 0.14), transparent 12rem),
      rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 30px rgba(46, 46, 46, 0.06);
  }

  .barista-product-shell [data-ui="page-header"]::after {
    content: '';
    position: absolute;
    right: -2.5rem;
    bottom: -4.5rem;
    width: 8rem;
    height: 10rem;
    border: 0.8rem solid rgba(180, 80, 42, 0.035);
    border-radius: 55% 45% 58% 42%;
    transform: rotate(25deg);
    pointer-events: none;
  }

  .barista-product-shell [data-ui="page-header"] h1 {
    color: #2E2E2E;
  }

  .barista-product-shell [data-ui="page-header-icon"] {
    background: rgba(180, 80, 42, 0.1);
    color: #B4502A;
  }

  .barista-product-shell [data-ui="eyebrow"] {
    color: #B4502A;
  }

  .barista-product-shell [data-ui="page-description"] {
    color: #6E7274;
  }

  .barista-product-shell [data-ui="toolbar"] {
    border: 1px solid rgba(46, 46, 46, 0.1);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 5px 20px rgba(46, 46, 46, 0.045);
  }

  .barista-product-shell [data-ui="notice"] {
    border: 1px solid rgba(46, 46, 46, 0.12);
    border-radius: 0.875rem;
    background: rgba(255, 255, 255, 0.85);
    color: #54585A;
  }

  .barista-product-shell [data-ui="notice"][data-tone="success"] {
    border-color: rgba(120, 134, 107, 0.3);
    background: rgba(120, 134, 107, 0.1);
    color: #526048;
  }

  .barista-product-shell [data-ui="notice"][data-tone="warning"] {
    border-color: rgba(180, 80, 42, 0.25);
    background: rgba(180, 80, 42, 0.08);
    color: #8F3D21;
  }

  .barista-product-shell [data-ui="notice"][data-tone="danger"] {
    border-color: rgba(185, 28, 28, 0.22);
    background: rgba(254, 242, 242, 0.94);
    color: #991B1B;
  }

  .barista-product-shell [data-ui="sheet-overlay"],
  .barista-product-shell [data-ui="modal-overlay"] {
    background: rgba(31, 28, 26, 0.52);
    backdrop-filter: blur(4px);
  }

  .barista-product-shell [data-ui="sheet"],
  .barista-product-shell [data-ui="modal"] {
    border-color: rgba(46, 46, 46, 0.12);
    background: #FCFAF7;
    box-shadow: 0 28px 80px rgba(35, 31, 28, 0.24);
  }

  .barista-product-shell [data-ui="sheet-header"] {
    border-color: rgba(46, 46, 46, 0.1);
    background: linear-gradient(180deg, rgba(244, 240, 232, 0.8), rgba(252, 250, 247, 0));
  }

  .barista-product-shell [data-ui="segmented-control"] {
    border-color: rgba(46, 46, 46, 0.12);
    background: rgba(46, 46, 46, 0.055);
  }

  .barista-product-shell [data-ui="segmented-option"][data-selected="true"] {
    background: #2E2E2E;
    color: #F4F0E8;
    box-shadow: 0 4px 12px rgba(46, 46, 46, 0.15);
  }

  .barista-product-shell .bf-product-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #2E2E2E 0%, #252525 65%, #35271F 100%);
  }

  .barista-product-shell .bf-product-hero::after {
    content: '';
    position: absolute;
    width: 12rem;
    height: 17rem;
    right: -4.75rem;
    top: -5.5rem;
    border: 1.5rem solid rgba(244, 240, 232, 0.045);
    border-radius: 52% 48% 60% 40%;
    transform: rotate(28deg);
    pointer-events: none;
  }

  /* The bundled iOS app and installed staff PWA share this device-controlled theme. */
  .staff-workspace-theme {
    color-scheme: light;
    --staff-shell: #F4F0E8;
    --staff-surface: rgba(255, 255, 255, 0.94);
    --staff-surface-solid: #FFFCF8;
    --staff-border: rgba(46, 46, 46, 0.12);
    --staff-shadow: rgba(46, 46, 46, 0.08);
  }

  .staff-workspace-header,
  .staff-workspace-bottom-nav {
    background: color-mix(in srgb, var(--staff-shell) 94%, transparent);
    box-shadow: 0 -12px 35px var(--staff-shadow);
  }

  .staff-workspace-header {
    box-shadow: 0 8px 28px var(--staff-shadow);
  }

  .staff-workspace-primary-nav {
    border-color: var(--staff-shell);
    box-shadow: 0 10px 26px color-mix(in srgb, #B4502A 28%, transparent);
  }

  @media (prefers-color-scheme: dark) {
    .staff-workspace-theme {
      color-scheme: dark;
      --color-tinman-charcoal: #F4F0E8;
      --color-tinman-cream: #1C1C1A;
      --color-tinman-brick: #D86A40;
      --color-tinman-blue: #9DBDCC;
      --color-tinman-olive: #A7B39B;
      --color-tinman-steel: #C5BEB4;
      --color-forge-blue-ink: #A9C7D6;
      --staff-shell: #1C1C1A;
      --staff-surface: rgba(43, 42, 39, 0.96);
      --staff-surface-solid: #2B2A27;
      --staff-surface-raised: #34322E;
      --staff-surface-selected: #3A2922;
      --staff-border: rgba(244, 240, 232, 0.14);
      --staff-muted: #C5BEB4;
      --staff-shadow: rgba(0, 0, 0, 0.34);
      background:
        radial-gradient(circle at 100% 0%, rgba(125, 162, 182, 0.14), transparent 26rem),
        radial-gradient(circle at 0% 100%, rgba(180, 80, 42, 0.12), transparent 30rem),
        var(--staff-shell);
      color: var(--color-tinman-charcoal);
    }

    .staff-workspace-theme [data-ui="card"],
    .staff-workspace-theme [data-ui="empty-state"],
    .staff-workspace-theme [data-ui="surface"],
    .staff-workspace-theme [data-ui="toolbar"],
    .staff-workspace-theme [data-ui="notice"],
    .staff-workspace-theme [data-ui="sheet"],
    .staff-workspace-theme [data-ui="modal"] {
      border-color: transparent;
      background: var(--staff-surface);
      color: var(--color-tinman-charcoal);
      box-shadow: 0 9px 28px var(--staff-shadow);
    }

    .staff-workspace-theme [data-ui="page-header"] {
      border-color: transparent;
      background:
        radial-gradient(circle at 98% 5%, rgba(157, 189, 204, 0.12), transparent 12rem),
        var(--staff-surface);
    }

    .staff-workspace-theme [data-ui="page-header"] h1,
    .staff-workspace-theme [data-ui="card-title"],
    .staff-workspace-theme h1,
    .staff-workspace-theme h2,
    .staff-workspace-theme h3,
    .staff-workspace-theme [class*="text-[#2E2E2E]"],
    .staff-workspace-theme [class*="text-[#1F2A44]"],
    .staff-workspace-theme [class*="text-[#25324A]"],
    .staff-workspace-theme [class*="text-[#233D77]"],
    .staff-workspace-theme [class*="text-[#2B3A52]"],
    .staff-workspace-theme [class*="text-[#2C3D57]"] {
      color: var(--color-tinman-charcoal) !important;
    }

    .staff-workspace-theme .text-tinman-charcoal {
      color: var(--color-tinman-charcoal) !important;
    }

    .staff-workspace-theme .text-tinman-steel,
    .staff-workspace-theme .text-forge-blue-ink,
    .staff-workspace-theme [class*="text-[#4F5F78]"],
    .staff-workspace-theme [class*="text-[#4B5E7D]"],
    .staff-workspace-theme [class*="text-[#52627A]"],
    .staff-workspace-theme [class*="text-[#53647E]"],
    .staff-workspace-theme [class*="text-[#6A7A93]"],
    .staff-workspace-theme [class*="text-[#6D7E98]"],
    .staff-workspace-theme [class*="text-[#7A8799]"],
    .staff-workspace-theme [class*="text-[#7A889D]"],
    .staff-workspace-theme [class*="text-[#7C8798]"],
    .staff-workspace-theme [class*="text-[#8A94A6]"] {
      color: var(--staff-muted) !important;
    }

    .staff-workspace-theme [class*="text-[#7B563D]"] {
      color: #E7A489 !important;
    }

    .staff-workspace-theme .text-slate-900,
    .staff-workspace-theme .text-slate-800,
    .staff-workspace-theme .text-slate-700 {
      color: var(--color-tinman-charcoal) !important;
    }

    .staff-workspace-theme .text-slate-600,
    .staff-workspace-theme .text-slate-500,
    .staff-workspace-theme .text-slate-400,
    .staff-workspace-theme [class*="text-[#60718A]"],
    .staff-workspace-theme [class*="text-[#657084]"] {
      color: var(--staff-muted) !important;
    }

    .staff-workspace-theme [class~="bg-white"],
    .staff-workspace-theme [class*="bg-[#FBFCFE]"],
    .staff-workspace-theme [class*="bg-[#F8FAFC]"],
    .staff-workspace-theme [class*="bg-[#FAFCFF]"],
    .staff-workspace-theme [class*="bg-[#FAFBFE]"] {
      background-color: var(--staff-surface-solid) !important;
    }

    .staff-workspace-theme [class*="bg-[#FFF8F1]"],
    .staff-workspace-theme [class*="bg-[#F7EFE8]"],
    .staff-workspace-theme [class*="bg-[#F8F1EA]"],
    .staff-workspace-theme [class*="bg-[#F4EFEA]"],
    .staff-workspace-theme [class*="bg-[#F4E8DE]"] {
      background-color: var(--staff-surface-selected) !important;
    }

    .staff-workspace-theme [class*="bg-[#F3F6FC]"],
    .staff-workspace-theme [class*="bg-[#F6F8FD]"],
    .staff-workspace-theme [class*="bg-[#F1F5FB]"],
    .staff-workspace-theme [class*="bg-[#EEF2F8]"],
    .staff-workspace-theme [class*="bg-[#E9EEF7]"],
    .staff-workspace-theme [class*="bg-[#F4F6F9]"],
    .staff-workspace-theme .bg-slate-100 {
      background-color: var(--staff-surface-raised) !important;
    }

    .staff-workspace-theme [class*="border-[#BFD0F8]"],
    .staff-workspace-theme [class*="border-[#CBD6ED]"],
    .staff-workspace-theme [class*="border-[#E3E8F0]"],
    .staff-workspace-theme [class*="border-[#E3E9F4]"],
    .staff-workspace-theme [class*="border-[#E4EAF4]"],
    .staff-workspace-theme [class*="border-[#E6ECF7]"],
    .staff-workspace-theme [class*="border-[#E7EDF7]"],
    .staff-workspace-theme [class*="border-[#EEF2F8]"],
    .staff-workspace-theme .border-tinman-blue {
      border-color: var(--staff-border) !important;
    }

    .staff-workspace-theme [class*="border-[#D6DEEB]"],
    .staff-workspace-theme [class*="border-[#E3E8F0]"],
    .staff-workspace-theme [class*="border-[#E3E9F4]"],
    .staff-workspace-theme [class*="border-[#E4E9F1]"],
    .staff-workspace-theme [class*="border-[#E4EAF4]"] {
      border-color: transparent !important;
    }

    .staff-workspace-theme [data-ui="card"],
    .staff-workspace-theme [data-ui="empty-state"],
    .staff-workspace-theme [data-ui="sheet"],
    .staff-workspace-theme [data-ui="modal"] {
      border-color: transparent !important;
    }

    .staff-workspace-theme [data-ui="status-badge"] {
      border-color: rgba(244, 240, 232, 0.12) !important;
      background: var(--staff-surface-raised) !important;
      color: var(--color-tinman-charcoal) !important;
    }

    .staff-workspace-theme [data-ui="status-badge"][data-tone="success"] {
      border-color: rgba(167, 179, 155, 0.28) !important;
      background: rgba(120, 134, 107, 0.24) !important;
      color: #D9E1D2 !important;
    }

    .staff-workspace-theme [data-ui="status-badge"][data-tone="warning"] {
      border-color: rgba(216, 106, 64, 0.3) !important;
      background: rgba(180, 80, 42, 0.2) !important;
      color: #F0C1AC !important;
    }

    .staff-workspace-theme [data-ui="status-badge"][data-tone="danger"] {
      border-color: rgba(248, 113, 113, 0.28) !important;
      background: rgba(127, 29, 29, 0.28) !important;
      color: #FCA5A5 !important;
    }

    .staff-workspace-theme button[class*="border-black"],
    .staff-workspace-theme button[class*="border-white"],
    .staff-workspace-theme [data-ui="empty-state"] {
      border-color: var(--staff-border) !important;
    }

    .staff-workspace-theme [data-ui="segmented-control"] {
      border-color: transparent !important;
      background: var(--staff-surface) !important;
    }

    .staff-workspace-theme [data-ui="segmented-option"][data-selected="true"] {
      background: var(--staff-surface-selected) !important;
      color: var(--color-tinman-charcoal) !important;
    }

    .staff-workspace-theme [data-ui="segmented-option"][data-selected="false"] {
      color: var(--staff-muted) !important;
    }

    .staff-workspace-theme .staff-settings-button {
      border-color: rgba(244, 240, 232, 0.12) !important;
      background: var(--staff-surface-raised) !important;
      color: var(--color-tinman-charcoal) !important;
    }

    .staff-workspace-theme .staff-task-stats-label {
      background: rgba(244, 240, 232, 0.92) !important;
      color: #2E2E2E !important;
    }

    .staff-workspace-theme .staff-chat-conversation,
    .staff-workspace-theme .staff-chat-composer,
    .staff-workspace-theme .staff-chat-composer label {
      border-color: rgba(244, 240, 232, 0.1) !important;
      background: var(--staff-surface-solid) !important;
    }

    .staff-workspace-theme .staff-chat-bubble-mine {
      background: #4A2D23 !important;
      color: #FFF8F1 !important;
    }

    .staff-workspace-theme .staff-chat-bubble-other {
      border-color: transparent !important;
      background: var(--staff-surface-raised) !important;
      color: var(--color-tinman-charcoal) !important;
    }

    .staff-workspace-theme .staff-chat-input {
      border-color: rgba(244, 240, 232, 0.22) !important;
      background: #35332F !important;
    }

    .staff-workspace-theme .cash-count-row,
    .staff-workspace-theme .cash-drop-line {
      border-color: rgba(244, 240, 232, 0.1) !important;
      background: var(--staff-surface-raised) !important;
      color: var(--color-tinman-charcoal) !important;
    }

    .staff-workspace-theme .border-red-200,
    .staff-workspace-theme .border-emerald-200,
    .staff-workspace-theme .border-slate-200 {
      border-color: var(--staff-border) !important;
    }

    .staff-workspace-theme .bg-red-50 {
      background-color: rgba(127, 29, 29, 0.24) !important;
    }

    .staff-workspace-theme .bg-emerald-50 {
      background-color: rgba(120, 134, 107, 0.22) !important;
    }

    .staff-workspace-theme .text-red-700,
    .staff-workspace-theme .text-red-800,
    .staff-workspace-theme .text-red-900 {
      color: #FCA5A5 !important;
    }

    .staff-workspace-theme .text-emerald-700,
    .staff-workspace-theme .text-emerald-800,
    .staff-workspace-theme .text-emerald-900 {
      color: #D9E1D2 !important;
    }

    .staff-workspace-theme [data-ui="sheet-header"] {
      border-color: var(--staff-border);
      background: linear-gradient(180deg, var(--staff-surface-raised), var(--staff-surface-solid));
    }

    .staff-workspace-theme [data-ui="notice"][data-tone="success"] {
      border-color: rgba(167, 179, 155, 0.34);
      background: rgba(120, 134, 107, 0.18);
      color: #D9E1D2;
    }

    .staff-workspace-theme [data-ui="notice"][data-tone="warning"] {
      border-color: rgba(216, 106, 64, 0.4);
      background: rgba(180, 80, 42, 0.16);
      color: #F0C1AC;
    }

    .staff-workspace-theme [data-ui="notice"][data-tone="danger"] {
      border-color: rgba(248, 113, 113, 0.32);
      background: rgba(127, 29, 29, 0.22);
      color: #FCA5A5;
    }

    .staff-workspace-theme input,
    .staff-workspace-theme textarea,
    .staff-workspace-theme select {
      border-color: var(--staff-border);
      background: #232320;
      color: var(--color-tinman-charcoal);
    }

    .staff-workspace-theme input::placeholder,
    .staff-workspace-theme textarea::placeholder {
      color: #9F998F;
    }

    .staff-workspace-theme input[type="checkbox"],
    .staff-workspace-theme input[type="radio"] {
      accent-color: var(--color-tinman-brick);
    }

    .staff-workspace-auth > div[aria-hidden="true"] {
      border-color: rgba(216, 106, 64, 0.08);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .barista-product-shell *,
    .barista-product-shell *::before,
    .barista-product-shell *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .marketing-shell--barista-forge *,
    .marketing-shell--barista-forge *::before,
    .marketing-shell--barista-forge *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  .marketing-shell .font-serif,
  .marketing-shell h1,
  .marketing-shell h2,
  .marketing-shell h3,
  .marketing-shell h4,
  .marketing-shell .marketing-display {
    font-family: Georgia, "Times New Roman", serif;
  }
}