@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');
/* IBM Plex Arabic — the brand's sole typeface.
   Loaded from the Google Fonts CDN (family name: "IBM Plex Sans Arabic").
   If you have licensed IBM Plex Arabic binaries, drop the woff2 files in
   assets/fonts/ and replace this @import with local @font-face rules. */


/* ===========================================================================
   COLORS — تسوق لي
   Base palette + semantic (Material 3) roles. All UI reads the --sys-* roles
   so light/dark switch cleanly. Never hardcode a hex in a component.
   =========================================================================== */
:root {
  /* --- Brand base palette (fixed, do not invent alternates) --- */
  --brand-green: #3D8B5F;        /* primary — fresh, trustworthy */
  --brand-green-dark: #2F6E4A;
  --brand-green-darker: #24543A;
  --brand-green-tint: #E8F5EC;   /* light container */
  --brand-amber: #C6642D;        /* secondary — earthy amber */
  --brand-amber-dark: #A5501F;
  --brand-amber-tint: #FBEEDD;

  /* Semantic status hues */
  --green-500: #3D8B5F;
  --green-50: #E8F5EC;
  --amber-500: #D99A2B;          /* pending / warning */
  --amber-50: #FBEEDD;
  --red-500: #C0392B;            /* error / rejected */
  --red-50: #FBEAE8;
  --rating-star: #FFB800;        /* rating stars — gold */

  /* Neutrals (warm) */
  --ink-900: #1F2421;            /* warm black — primary text */
  --ink-600: #5F6B65;            /* warm gray — secondary text */
  --ink-400: #8A948E;            /* disabled / hint */
  --line-200: #E4E7E4;           /* hairline borders */
  --line-300: #D5D9D5;
  --surface-cream: #FAFAF8;      /* page background */
  --surface-white: #FFFFFF;
  --surface-raised: #FFFFFF;
  --scrim: rgba(31, 36, 33, 0.48);

  /* =====================================================================
     SEMANTIC ROLES (use these everywhere)
     ===================================================================== */
  --sys-primary: var(--brand-green);
  --sys-on-primary: #FFFFFF;
  --sys-primary-container: var(--brand-green-tint);
  --sys-on-primary-container: var(--brand-green-darker);

  --sys-secondary: var(--brand-amber);
  --sys-on-secondary: #FFFFFF;
  --sys-secondary-container: var(--brand-amber-tint);
  --sys-on-secondary-container: var(--brand-amber-dark);

  --sys-success: var(--green-500);
  --sys-success-container: var(--green-50);
  --sys-on-success-container: #1E5537;
  --sys-warning: var(--amber-500);
  --sys-warning-container: var(--amber-50);
  --sys-on-warning-container: #7A5410;
  --sys-error: var(--red-500);
  --sys-error-container: var(--red-50);
  --sys-on-error-container: #7A241B;

  --sys-bg: var(--surface-cream);
  --sys-surface: var(--surface-white);
  --sys-surface-variant: #F1F3F0;   /* subtle fills, skeletons */
  --sys-surface-raised: var(--surface-raised);
  --sys-on-surface: var(--ink-900);
  --sys-on-surface-variant: var(--ink-600);
  --sys-outline: var(--line-300);
  --sys-outline-variant: var(--line-200);
  --sys-scrim: var(--scrim);

  /* State layer opacities (Material state model) */
  --state-hover: 0.08;  /* @kind other */
  --state-press: 0.12;  /* @kind other */
}

/* =========================================================================
   DARK MODE — high-contrast (used outdoors in strong sunlight → WCAG AA+)
   Applies on .dark scope or system preference.
   ========================================================================= */
:root.dark, .dark {
  --sys-primary: #6FBF8E;
  --sys-on-primary: #06331C;
  --sys-primary-container: #1E5537;
  --sys-on-primary-container: #C6F0D5;

  --sys-secondary: #E68A50;
  --sys-on-secondary: #4A1E06;
  --sys-secondary-container: #7A3D18;
  --sys-on-secondary-container: #FCDCC3;

  --sys-success: #6FBF8E;
  --sys-success-container: #1E5537;
  --sys-on-success-container: #C6F0D5;
  --sys-warning: #F0BC5C;
  --sys-warning-container: #5C4310;
  --sys-on-warning-container: #FBEAC4;
  --sys-error: #F0776A;
  --sys-error-container: #6E241C;
  --sys-on-error-container: #FBD5D0;

  --sys-bg: #141715;
  --sys-surface: #1C201D;
  --sys-surface-variant: #262B27;
  --sys-surface-raised: #232823;
  --sys-on-surface: #EBEEEA;
  --sys-on-surface-variant: #B6BFB8;
  --sys-outline: #3B423D;
  --sys-outline-variant: #2C322D;
  --sys-scrim: rgba(0, 0, 0, 0.6);
}
/* Automatic dark mode: add class="dark" on <html> to opt in. (A prefers-color-scheme
   block was intentionally omitted so tokens register under a single theme scope.) */

/* ===========================================================================
   TYPOGRAPHY — IBM Plex Arabic, Material 3 type scale
   Arabic-first: line-heights are generous for diacritics & clarity.
   Never render label text below 11sp.
   =========================================================================== */
:root {
  --font-arabic: "IBM Plex Sans Arabic", "IBM Plex Arabic", system-ui, "Segoe UI", sans-serif;
  --font-base: var(--font-arabic);

  /* Weights */
  --fw-light: 300;      /* @kind other */
  --fw-regular: 400;    /* @kind other */
  --fw-medium: 500;     /* @kind other */
  --fw-semibold: 600;   /* @kind other */
  --fw-bold: 700;       /* @kind other */

  /* --- Material 3 type scale (px = sp on a mobile baseline) --- */
  /* Display */
  --type-display-size: 36px;    --type-display-line: 44px;    --type-display-weight: var(--fw-bold);
  /* Headline Large */
  --type-headline-size: 28px;   --type-headline-line: 36px;   --type-headline-weight: var(--fw-semibold);
  /* Headline Small */
  --type-headline-sm-size: 22px;--type-headline-sm-line: 30px;--type-headline-sm-weight: var(--fw-semibold);
  /* Title Medium */
  --type-title-size: 16px;      --type-title-line: 24px;      --type-title-weight: var(--fw-semibold);
  /* Title Small */
  --type-title-sm-size: 14px;   --type-title-sm-line: 20px;   --type-title-sm-weight: var(--fw-semibold);
  /* Body Large */
  --type-body-lg-size: 16px;    --type-body-lg-line: 26px;    --type-body-lg-weight: var(--fw-regular);
  /* Body Medium */
  --type-body-size: 14px;       --type-body-line: 22px;       --type-body-weight: var(--fw-regular);
  /* Label Large (buttons) */
  --type-label-lg-size: 15px;   --type-label-lg-line: 20px;   --type-label-lg-weight: var(--fw-semibold);
  /* Label Medium */
  --type-label-size: 13px;      --type-label-line: 16px;      --type-label-weight: var(--fw-medium);
  /* Label Small (min 11sp) */
  --type-label-sm-size: 11px;   --type-label-sm-line: 15px;   --type-label-sm-weight: var(--fw-medium);
}

/* Convenience utility classes (optional; components mostly read the vars) */
.type-display   { font: var(--type-display-weight) var(--type-display-size)/var(--type-display-line) var(--font-base); letter-spacing: -0.01em; }
.type-headline  { font: var(--type-headline-weight) var(--type-headline-size)/var(--type-headline-line) var(--font-base); letter-spacing: -0.005em; }
.type-headline-sm { font: var(--type-headline-sm-weight) var(--type-headline-sm-size)/var(--type-headline-sm-line) var(--font-base); }
.type-title     { font: var(--type-title-weight) var(--type-title-size)/var(--type-title-line) var(--font-base); }
.type-title-sm  { font: var(--type-title-sm-weight) var(--type-title-sm-size)/var(--type-title-sm-line) var(--font-base); }
.type-body-lg   { font: var(--type-body-lg-weight) var(--type-body-lg-size)/var(--type-body-lg-line) var(--font-base); }
.type-body      { font: var(--type-body-weight) var(--type-body-size)/var(--type-body-line) var(--font-base); }
.type-label-lg  { font: var(--type-label-lg-weight) var(--type-label-lg-size)/var(--type-label-lg-line) var(--font-base); }
.type-label     { font: var(--type-label-weight) var(--type-label-size)/var(--type-label-line) var(--font-base); }
.type-label-sm  { font: var(--type-label-sm-weight) var(--type-label-sm-size)/var(--type-label-sm-line) var(--font-base); }

/* ===========================================================================
   SPACING — 4dp base grid. Touch targets never below 48dp.
   =========================================================================== */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;   /* default screen gutter (mobile) */
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-12: 96px;

  --gutter-mobile: 24px;   /* One UI keyline: min 24dp side margins on handhelds */
  --gutter-desktop: 32px;
  --keyline-min: 24px;     /* One UI safe-area minimum for touch content */

  --touch-min: 48px;   /* minimum interactive size */

  --content-max: 1200px;   /* admin / landing content width */
}

/* ===========================================================================
   SHAPE — large, soft radii (One UI feel). Buttons are full pills.
   =========================================================================== */
:root {
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;    /* default card radius */
  --radius-lg: 20px;
  --radius-xl: 24px;    /* hero cards, bottom sheets */
  --radius-2xl: 28px;
  --radius-focus: 26px; /* One UI focus-block / thumbnail radius (large grid) */
  --radius-pill: 999px; /* buttons, chips */
  --radius-full: 50%;
}

/* ===========================================================================
   ELEVATION — soft, low-contrast shadows (warm-tinted). One UI is calm:
   prefer surface tints & hairlines over heavy drop shadows.
   =========================================================================== */
:root {
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(31, 36, 33, 0.06), 0 1px 3px rgba(31, 36, 33, 0.05);
  --elev-2: 0 2px 6px rgba(31, 36, 33, 0.07), 0 1px 3px rgba(31, 36, 33, 0.05);
  --elev-3: 0 6px 16px rgba(31, 36, 33, 0.09), 0 2px 6px rgba(31, 36, 33, 0.06);
  --elev-4: 0 12px 28px rgba(31, 36, 33, 0.12), 0 4px 10px rgba(31, 36, 33, 0.07);
  /* floating cart / bottom sheet lift */
  --elev-sheet: 0 -6px 24px rgba(31, 36, 33, 0.10);

  /* Motion — gentle, no bounce. Material standard easing. */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* @kind other */
  --ease-decel: cubic-bezier(0, 0, 0, 1);         /* @kind other */
  --ease-accel: cubic-bezier(0.3, 0, 1, 1);       /* @kind other */
  --dur-fast: 120ms;   /* @kind other */
  --dur-base: 200ms;   /* @kind other */
  --dur-slow: 320ms;   /* @kind other */
}

/* ===========================================================================
   BASE — RTL-first resets and document defaults. Arabic is the design origin,
   not a translation: dir=rtl is the baseline everywhere.
   =========================================================================== */
html { direction: rtl; }
body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line);
  color: var(--sys-on-surface);
  background: var(--sys-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }

a { color: var(--sys-primary); text-decoration: none; }
a:hover { color: var(--brand-green-dark); text-decoration: underline; }

/* Numerals: keep Latin digits (prices) tabular for alignment */
.tnum { font-variant-numeric: tabular-nums; }

::selection { background: var(--sys-primary-container); color: var(--sys-on-primary-container); }

/* Focus ring — visible, brand-tinted (accessibility for low-vision users) */
:focus-visible { outline: 3px solid var(--sys-primary); outline-offset: 2px; }