/* Genere par `php artisan assets:bundle` — ne pas editer a la main. */
/* --- fonts.css --- */
/* Zigzag has no licensed brand font files. Poppins (Google Fonts) is the closest
   match to the geometric, round-terminal sans used across the app mockups and the
   logo lockup's "Food delivery" line. Substitution flagged in readme.md. */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Cairo:wght@400;600;700;900&display=swap");
/* --- colors.css --- */
:root{
/* --- Brand orange: the logo, every primary action, every active state --- */
--orange-50:#FFF7F1;
--orange-100:#FFEDE0;
--orange-200:#FFD9BF;
--orange-300:#FFB27E;
--orange-400:#FF8C42;
--orange-500:#F26F21;   /* brand core — logo wordmark, primary fill */
--orange-600:#E25A0F;   /* pressed / gradient end */
--orange-700:#B8480C;
--orange-900:#7A2F06;

/* --- Neutrals: near-black headings on warm-white surfaces --- */
--neutral-0:#FFFFFF;
--neutral-25:#FBFBFC;
--neutral-50:#F7F7F8;   /* app page background */
--neutral-100:#F1F2F4;  /* filled inputs, inactive chips */
--neutral-200:#E7E8EB;  /* hairline borders */
--neutral-300:#D3D5DA;
--neutral-400:#9CA3AF;  /* placeholder */
--neutral-500:#6B7280;  /* secondary text */
--neutral-700:#374151;
--neutral-900:#17181B;  /* headings */

/* --- Semantic accents --- */
--green-50:#E9F8EF;
--green-500:#16A34A;    /* free delivery, order-ready, savings */
--green-600:#0F8A3D;
--yellow-400:#FFC107;   /* rating stars */
--yellow-500:#F5B301;
--red-50:#FEECEC;
--red-500:#EF4444;      /* notification dot, destructive */
--purple-50:#F3EEFF;
--purple-500:#7C3AED;   /* promo-code slot only */
--blue-500:#2563EB;

/* --- Semantic aliases: use these in components --- */
--brand:var(--orange-500);
--brand-hover:var(--orange-400);
--brand-press:var(--orange-600);
--brand-tint:var(--orange-100);
--brand-tint-soft:var(--orange-50);
--brand-gradient:linear-gradient(90deg,var(--orange-500) 0%,var(--orange-600) 100%); /* @kind color */
--brand-gradient-warm:linear-gradient(135deg,#FFF1E6 0%,#FFE3D0 100%); /* @kind color */

--text-heading:var(--neutral-900);
--text-body:var(--neutral-700);
--text-muted:var(--neutral-500);
--text-placeholder:var(--neutral-400);
--text-on-brand:var(--neutral-0);
--text-brand:var(--orange-500);
--text-price:var(--neutral-900);
--text-price-total:var(--orange-500);

--surface-page:var(--neutral-50);
--surface-card:var(--neutral-0);
--surface-sunken:var(--neutral-100);
--surface-brand-soft:var(--orange-50);
--surface-success-soft:var(--green-50);
--surface-overlay:rgba(23,24,27,.55);
--surface-scrim-photo:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 45%); /* @kind color */

--border-hairline:var(--neutral-200);
--border-strong:var(--neutral-300);
--border-brand:var(--orange-500);
--border-focus:var(--orange-400);

--status-success:var(--green-500);
--status-warning:var(--yellow-500);
--status-danger:var(--red-500);
--status-rating:var(--yellow-400);
--status-free:var(--green-500);
}
/* --- typography.css --- */
:root{
--font-core:"Poppins","Helvetica Neue",Arial,sans-serif;
--font-arabic:"Cairo","Poppins",sans-serif;   /* Tunisian-darija marketing lines */
--font-numeric:"Poppins",sans-serif;          /* prices are set in the core face, tabular */

--weight-light:300; /* @kind other */
--weight-regular:400; /* @kind other */
--weight-medium:500; /* @kind other */
--weight-semibold:600; /* @kind other */
--weight-bold:700; /* @kind other */
--weight-black:800; /* @kind other */   /* logo-adjacent display only */

/* Sizes are mobile-first: the app is a 390pt phone canvas */
--size-display:34px;   /* screen hero numbers, "SSF25" */
--size-h1:26px;        /* screen title, restaurant name */
--size-h2:20px;        /* section header "Les plus commandés" */
--size-h3:17px;        /* card title, dish name */
--size-body:15px;      /* descriptions */
--size-body-sm:13px;   /* meta rows: "30–40 Min • 0.8 km" */
--size-caption:12px;   /* tab labels, sub-labels */
--size-micro:10px;     /* badge text: "TOP VENTE" */

--line-tight:1.15; /* @kind other */
--line-snug:1.3; /* @kind other */
--line-body:1.5; /* @kind other */
--line-loose:1.65; /* @kind other */

--track-tight:-0.02em; /* @kind other */
--track-normal:0; /* @kind other */
--track-badge:0.06em; /* @kind other */  /* uppercase badges are always tracked out */

--text-display:var(--weight-bold) var(--size-display)/var(--line-tight) var(--font-core);
--text-h1:var(--weight-bold) var(--size-h1)/var(--line-tight) var(--font-core);
--text-h2:var(--weight-bold) var(--size-h2)/var(--line-snug) var(--font-core);
--text-h3:var(--weight-semibold) var(--size-h3)/var(--line-snug) var(--font-core);
--text-body-default:var(--weight-regular) var(--size-body)/var(--line-body) var(--font-core);
--text-meta:var(--weight-regular) var(--size-body-sm)/var(--line-body) var(--font-core);
--text-label:var(--weight-semibold) var(--size-caption)/var(--line-snug) var(--font-core);
--text-badge:var(--weight-bold) var(--size-micro)/1 var(--font-core);
}
/* --- spacing.css --- */
:root{
/* 4px base; the app leans on 12 / 16 / 20 for nearly everything */
--space-0:0px;
--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;

--gutter-screen:16px;      /* left/right page padding on mobile */
--gap-card-stack:12px;     /* between stacked cards */
--gap-section:24px;        /* between page sections */
--pad-card:16px;
--pad-card-tight:12px;
--pad-control-x:20px;
--pad-control-y:14px;

--control-h-sm:36px;
--control-h-md:44px;       /* minimum touch target */
--control-h-lg:52px;       /* primary CTAs */
--icon-sm:16px;
--icon-md:20px;
--icon-lg:24px;
--avatar-sm:28px;
--thumb-list:88px;         /* dish row thumbnail */
--hero-photo-h:230px;      /* restaurant header photo */
}
/* --- radius.css --- */
:root{
--radius-xs:6px;
--radius-sm:10px;
--radius-md:14px;    /* inputs, small tiles */
--radius-lg:16px;    /* cards, photos */
--radius-xl:20px;    /* sheets, hero cards */
--radius-2xl:28px;   /* bottom sheet / cart bar */
--radius-pill:999px; /* chips, CTAs, search field, category tabs */
--radius-circle:50%;
}
/* --- elevation.css --- */
:root{
--shadow-none:none;
--shadow-hairline:0 0 0 1px var(--border-hairline);
--shadow-card:0 1px 3px rgba(23,24,27,.04),0 6px 16px rgba(23,24,27,.05);
--shadow-raised:0 2px 6px rgba(23,24,27,.05),0 12px 28px rgba(23,24,27,.08);
--shadow-brand:0 6px 18px rgba(242,111,33,.28);   /* under primary CTAs */
--shadow-bar:0 -4px 24px rgba(23,24,27,.10);      /* bottom nav / cart bar */
--shadow-float:0 4px 14px rgba(23,24,27,.16);     /* circular buttons over photos */
--blur-glass:blur(12px); /* @kind other */
}
/* --- motion.css --- */
:root{
--dur-instant:90ms; /* @kind other */
--dur-fast:150ms; /* @kind other */
--dur-base:220ms; /* @kind other */
--dur-slow:320ms; /* @kind other */
--ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */
--ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
--ease-in:cubic-bezier(.4,0,1,1); /* @kind other */
--ease-pop:cubic-bezier(.34,1.56,.64,1); /* @kind other */   /* add-to-cart, quantity bump */
--press-scale:.97; /* @kind other */
--transition-control:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),transform var(--dur-instant) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard); /* @kind other */
}
/* --- base.css --- */
.zz-root{font:var(--text-body-default);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.zz-root h1,.zz-root h2,.zz-root h3{color:var(--text-heading);margin:0}
.zz-root :is(a,button){font-family:inherit}
.zz-root a{color:var(--text-brand);text-decoration:none}
.zz-root a:hover{color:var(--brand-press)}
.zz-num{font-variant-numeric:tabular-nums}