/*!
* ZippyMeals — base.css
* ---------------------
* Project: ZippyMeals (UI Foundation / Design Tokens / Base Components)
* Author : Mayank Chawdhari (BOSS294)
* Version: 1.0.0
* Build : 2025-11-06
* License: Copyright (c) 2025 ZippyMeals. All rights reserved.
* Trademark: "ZippyMeals" is a trademark of ZippyMeals Private Limited.
*
* Description:
* This file contains the core CSS design tokens, utility variables,
* reset, base typography, layout helpers, and canonical button styles
* used across the ZippyMeals website and admin surfaces.
*
* Changelog:
* 1.0.0 — Initial production-ready token set + buttons + toasts + helpers.
*
* Creator / Developer:
* Mayank Chawdhari (BOSS294)
*
* HOW TO USE / INTEGRATE
* ----------------------
* 1) Include this file globally (recommended in ):
*
*
* 2) Fonts:
* - This CSS defines token names for font stacks ( --font-sans / --font-display ).
* - Import desired web fonts in your HTML (Google Fonts / local) and then
* optionally override the font tokens via :root or theme variables.
*
* 3) Theming:
* - The file exposes CSS variables under :root for the default theme.
* - To create alternate themes, set variables on body[data-theme="theme-id"]
* or on .theme-- selectors. Example:
*
* body[data-theme="ember-coal"] {
* --color-bg: #0b0b0c;
* --color-surface: #151515;
* --color-accent: #ff6b6b;
* --color-accent-2: #ffd166;
* }
*
* 4) Buttons:
* - Use the .btn base and modifier classes:
*
*
*
* - Available modifiers:
* .btn--primary (solid CTA)
* .btn--accent (alternate solid)
* .btn--outline (glass / outline)
* .btn--danger (destructive)
* .btn--sm (small)
* .btn--lg (large)
*
* 5) Toasts:
* - Container: .toasts (fixed container)
* - Each toast should use .toast and .toast-- for visuals
* (the JavaScript in your app can create the DOM nodes).
*
* 6) Utilities:
* - Use .card, .container, .row, .col, .muted, .pill when building components.
*
* Accessibility / Best Practices:
* - Buttons include strong focus styles and reduced motion fallbacks.
* - Use semantic HTML (button, header, main, nav) and aria-* attributes.
* - Respect prefers-reduced-motion queries in JS & CSS.
*
* NOTES:
* - This file is intentionally token-first. Changing a few variables at the top
* will propagate across all components.
* - Keep this file loaded before component-specific CSS so those components can
* leverage tokens and override only what they need.
*/
/* =========================
DESIGN TOKENS (variables)
========================= */
:root{
/* --- Color scale (dark theme base) --- */
--color-bg: #0b0b0d; /* page background */
--color-bg-2: #121217; /* elevated background */
--color-surface: #0f1316; /* cards / panels */
--color-panel: #12161a; /* alternate surface */
--color-glass: rgba(255,255,255,0.02);
/* accents */
--color-accent: #ff6b6b; /* primary accent (CTA) */
--color-accent-2: #ffd166; /* warm secondary accent */
--color-accent-3: #4ab3ff; /* cool accent */
/* semantic */
--color-success: #9ef0b0;
--color-info: #bfeaff;
--color-warn: #ffd99a;
--color-danger: #ffb6b6;
/* text */
--color-text: #e6eef6;
--color-muted: #9fb3d2;
--color-faint: rgba(230,238,246,0.12);
/* borders & dividers */
--color-border: rgba(255,255,255,0.03);
--color-divider: rgba(255,255,255,0.02);
/* Elevation / shadows */
--shadow-1: 0 6px 18px rgba(2,6,12,0.55);
--shadow-2: 0 12px 30px rgba(2,6,12,0.62);
--shadow-3: 0 20px 50px rgba(2,6,12,0.7);
--shadow-inset: inset 0 -6px 18px rgba(0,0,0,0.36);
/* Spacing */
--space-xs: 6px;
--space-sm: 10px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 36px;
/* Radii */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-pill: 999px;
/* Typography stacks (tokens — override these if you import different fonts) */
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-display: "Poppins", var(--font-sans);
--font-mono: "ui-monospace","SFMono-Regular","Menlo","Monaco","Roboto Mono",monospace;
/* Type scale */
--type-base: 16px;
--type-xs: 12px;
--type-sm: 14px;
--type-md: 16px;
--type-lg: 20px;
--type-xl: 28px;
/* Transitions */
--ease-slow: cubic-bezier(.2,.9,.2,1);
--transition-fast: 150ms;
--transition-default: 220ms;
/* Buttons tokenized */
--btn-radius: var(--radius-md);
--btn-padding-y: 10px;
--btn-padding-x: 14px;
--btn-min-height: 44px;
--btn-solid-bg: linear-gradient(180deg, var(--color-accent) 0%, color-mix(in srgb, var(--color-accent) 80%, black 10%) 100%);
--btn-solid-color: #071017;
--btn-solid-border: rgba(255,255,255,0.06);
--btn-outline-bg: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.006));
--btn-outline-color: var(--color-text);
--btn-outline-border: rgba(255,255,255,0.06);
/* Toasts */
--toast-width: 340px;
--toast-bg: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.006));
--toast-border: rgba(255,255,255,0.03);
/* Accessibility */
--focus-ring: 3px;
--focus-color: color-mix(in srgb, var(--color-accent) 60%, white 40%);
}
/* =========================
RESET / BASE
========================= */
*,
*::before,
*::after { box-sizing: border-box; }
html { font-size: var(--type-base); -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
.scroll-target-focus:focus {
outline: 3px solid color-mix(in srgb, var(--color-accent) 65%, white 35%);
outline-offset: 6px;
border-radius: 8px;
}
/* small subtle active nav highlight for scroll-spy */
.zm-scroll-active { color: var(--color-accent); font-weight: 800; }
body {
margin: 0;
min-height: 100vh;
font-family: var(--font-sans);
background: var(--color-bg);
color: var(--color-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.45;
-webkit-tap-highlight-color: transparent;
}
/* make images behave */
img, picture, video { max-width: 100%; height: auto; display: block; }
/* default link */
a { color: var(--color-accent-3); text-decoration: none; }
a:hover { text-decoration: underline; }
/* structural helpers */
.container { max-width: 1180px; margin-left: auto; margin-right: auto; padding-left: var(--space-md); padding-right: var(--space-md); }
.row { display:flex; gap: var(--space-md); align-items:center; }
.col { display:flex; flex-direction:column; gap: var(--space-sm); }
/* cards & surfaces */
.card {
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.007));
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-2);
padding: var(--space-md);
}
/* small subtle glass panel */
.panel {
background: var(--btn-outline-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-sm);
}
/* text utilities */
.h1 { font-family: var(--font-display); font-size: var(--type-xl); font-weight:700; margin:0 0 var(--space-sm) 0; color:var(--color-text); }
.h2 { font-family: var(--font-display); font-size: var(--type-lg); font-weight:700; margin:0 0 var(--space-xs) 0; }
.lead { font-size: var(--type-md); color: var(--color-muted); margin:0; }
/* small helpers */
.muted { color: var(--color-muted); font-size: var(--type-sm); }
.small { font-size: var(--type-sm); color: var(--color-muted); }
/* pills */
.pill {
display:inline-block;
padding: 6px 10px;
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
color: var(--color-text);
font-weight:700;
font-size: 13px;
}
/* =========================
BUTTONS (canonical)
========================= */
/* Base button (use semantic