/* ============================================================
   TOP END LIQUOR BEER & WINES — Base Design Tokens & Reset
   ============================================================ */

/* — CSS Custom Properties / Design Tokens — */
:root {
    /* Backgrounds */
    --bg-primary: #f8f9fa;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f3f5;

    /* Brand Colors */
    --primary-green: #79c142;
    --primary-green-hover: #60b024;
    --primary-green-light: #e8f5e0;
    --primary-green-glow: rgba(121, 193, 66, 0.25);
    --accent-red: #c1272d;
    --accent-red-hover: #a11f24;
    --accent-red-light: #fde8e8;

    /* Text
       Measured against the two surfaces these actually sit on — #ffffff
       (--bg-secondary) and #f8f9fa (--bg-primary). The audited values failed
       WCAG AA for body copy on the page background:
         old --text-muted #6c757d on #f8f9fa = 4.45:1  (AA needs 4.50)
         old --text-light #868e96 on #ffffff = 3.32:1  (AA needs 4.50)
       --text-light carried the age/compliance line in the footer at 0.75rem,
       which is precisely the text that must be legible. */
    --text-main: #212529;
    --text-muted: #5f666d;   /* 5.90:1 on #fff, 5.52:1 on #f8f9fa, 5.23:1 on #f1f3f5 */
    --text-light: #697079;   /* 5.01:1 on #fff, 4.75:1 on #f8f9fa */

    /* Borders */
    --border-muted: #dee2e6;
    --border-light: #e9ecef;
    --border-glow: rgba(121, 193, 66, 0.15);

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.04);
    --shadow-green: 0 4px 15px rgba(121, 193, 66, 0.25);

    /* Glass */
    --glass-bg: rgba(255, 255, 255, 0.92);
    --glass-blur: blur(14px);

    /* Typography */
    --font-display: 'Outfit', sans-serif;
    --font-sans: 'Outfit', sans-serif;

    /* Spacing scale */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* Border radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Content width */
    --max-width: 1240px;

    /* Transition */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-bounce: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* — Reset — */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.6;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

/* Hover uses the dark green, not #79C142: the brand green on white measures
   2.21:1, so every link on the site lost its contrast the moment it was
   hovered — the state that is meant to confirm "this is clickable". */
a:hover {
    color: var(--dark-green);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

input,
select,
textarea,
button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
}

button {
    cursor: pointer;
}

ul, ol {
    list-style: none;
}

/* — Custom scrollbar — */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-muted);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-green);
}

/* — Typography utilities — */
.text-main { color: var(--text-main); }
.text-muted { color: var(--text-muted); }
.text-light { color: var(--text-light); }
/* A "green text" utility has to be readable green: #79C142 is 2.21:1 on white. */
.text-green { color: var(--dark-green); }
.text-red { color: var(--accent-red); }
.text-white { color: #ffffff; }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.85rem; }
.text-base { font-size: 0.95rem; }
.text-lg { font-size: 1.1rem; }
.text-xl { font-size: 1.35rem; }
.text-2xl { font-size: 1.65rem; }
.text-3xl { font-size: 2rem; }

.text-uppercase {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.text-center { text-align: center; }

/* — Section headings — */
.section-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: var(--space-xl);
}

.section-title.center {
    text-align: center;
}

/* — Skeleton loading animation — */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, #e8eaed 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.skeleton-text.short { width: 40%; }
.skeleton-text.medium { width: 70%; }
.skeleton-text.long { width: 90%; }

/* — Visibility utilities — */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}

/* The "Skip to main content" link was a plain .sr-only anchor, so it stayed
   clipped to 1px even while focused: a keyboard user's very first Tab landed
   on a control they could not see. It must become visible on focus. */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 300;
    transform: translateY(-120%);
    background: var(--bg-secondary);
    color: var(--dark-green);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.7rem 1.15rem;
    border: 2px solid var(--dark-green);
    border-radius: 0 0 var(--radius-md) 0;
    transition: transform var(--transition-fast);
}

.skip-link:focus {
    transform: translateY(0);
    color: var(--dark-green);
}

/* — Container — */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

/* ============================================================
   Design-system additions — TL-085 responsive audit
   ------------------------------------------------------------
   base.css previously contained ZERO media queries. Everything
   below establishes the shared token set used identically by the
   storefront, the admin panel and the manager panel, plus the
   fluid behavior at 360 / 768 / 1024 / 1440.
   ============================================================ */

:root {
    /* Dark green — the accessible text-on-white companion to the
       #79C142 action color, which is too light for body contrast. */
    --dark-green: #3f7a17;
    --dark-green-hover: #33630f;
    --dark-green-light: #eef6e7;

    /* Ink for anything PRINTED ON the brand green.
       #79C142 is a light color: white on it measures 2.21:1, and on the
       gradient's dark end (#60b024) still only 2.72:1 — both far below the
       4.50:1 AA floor. Every filled green control on the site used white.
       The brand green stays exactly #79C142 as the action color; the label
       flips to the existing near-black ink instead, which measures 6.99:1 on
       #79C142 and 5.68:1 on #60b024. No new color is introduced. */
    --on-primary: var(--text-main);

    /* Semantic tone ramp. Every status pill in every panel is driven
       by Enum::tone(), which returns one of these four keys. */
    --tone-success-bg: #e8f5e0;
    --tone-success-fg: #2f6410;
    --tone-success-br: #b9e29a;

    --tone-warning-bg: #fff6e0;
    --tone-warning-fg: #8a5b00;
    --tone-warning-br: #f2d79a;

    --tone-danger-bg: #fde8e8;
    --tone-danger-fg: #94191e;
    --tone-danger-br: #f0b6b8;

    --tone-info-bg: #e7f1fb;
    --tone-info-fg: #1c4e80;
    --tone-info-br: #b6d3ef;

    --tone-muted-bg: #f1f3f5;
    --tone-muted-fg: #5b636a;
    --tone-muted-br: #dee2e6;

    /* Focus ring — one definition, used by every interactive element. */
    --focus-ring: 0 0 0 3px rgba(121, 193, 66, 0.35);

    /* Layout rails shared by admin + manager shells */
    --panel-sidebar-w: 264px;
    --panel-sidebar-w-compact: 76px;
}

/* Dark-green is the correct color for links and headings on white:
   #79C142 on #FFF is ~1.9:1 and fails WCAG for text. */
.text-dark-green { color: var(--dark-green); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--dark-green);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* A standalone page (the maintenance screen) centers a single card and does
   not want the app shell's flex column. It was opting out with a style
   attribute on <body>. */
body.page-standalone { display: block; }

/* Never let a long word or a wide table push the page sideways. */
body { overflow-x: hidden; }
.container, .main-content { min-width: 0; }

/* ---- Touch targets ----------------------------------------
   Icon-only controls were sized to their glyph: the header bag was a 31px
   box, the notification bell 38px, the cart quantity steppers 34px and the
   pagination links 38px (34px below 480). All are below the 44px minimum,
   and all of them are the controls a phone user actually presses.

   The hit area is grown with a centered ::after pseudo-element rather than by
   inflating the box, so the visual weight of the header and the toolbars is
   unchanged — only the region that responds to a thumb grows. */
.tap-target { position: relative; }

.tap-target::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

@media (pointer: fine) {
    /* A mouse does not need the padding, and an oversized invisible box would
       otherwise swallow hovers meant for the element beside it. */
    .tap-target::after { width: 100%; height: 100%; }
}

/* ---- Utility helpers shared by all three surfaces ---- */
.stack        { display: flex; flex-direction: column; gap: var(--space-md); }
.stack-sm     { display: flex; flex-direction: column; gap: var(--space-sm); }
.row-between  { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.row-gap      { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.grow         { flex: 1 1 auto; min-width: 0; }
.mt-0 { margin-top: 0; } .mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-0 { margin-bottom: 0; } .mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.w-full { width: 100%; }
.text-right { text-align: right; }
.text-nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Breakpoints ---------------------------------------- */

/* 1440 and up — widen the rail slightly, nothing else changes. */
@media (min-width: 1440px) {
    :root { --max-width: 1360px; }
}

/* 1024 — tablets landscape */
@media (max-width: 1024px) {
    .container { padding: 0 var(--space-lg); }
    .section-title { font-size: 1.2rem; margin-bottom: var(--space-lg); }
}

/* 768 — tablets portrait */
@media (max-width: 768px) {
    body { font-size: 14.5px; }
    .container { padding: 0 var(--space-md); }
    .text-3xl { font-size: 1.6rem; }
    .text-2xl { font-size: 1.35rem; }
    .text-xl  { font-size: 1.15rem; }
    .section-title { font-size: 1.1rem; }
    .hide-md { display: none !important; }
}

/* 360 — the smallest phone we support */
@media (max-width: 480px) {
    .container { padding: 0 0.85rem; }
    .text-3xl { font-size: 1.4rem; }
    .row-between { align-items: flex-start; }
    .hide-sm { display: none !important; }
    .empty-state { padding: var(--space-2xl) var(--space-md); }
}

@media print {
    .site-header, .site-footer, .admin-sidebar, .panel-topbar,
    .no-print { display: none !important; }
    body { background: #fff; }
}