/* ============================================================
   PEEYESYEM DESIGN TOKENS
   Brand palette extracted from the shield logo. Yellow is a
   precision accent, not a section background.
   ============================================================ */
:root {
  /* Brand color */
  --psm-yellow: #f9e006;
  --psm-yellow-deep: #d5be00;
  --psm-yellow-soft: #fff6a3;
  --psm-black: #070707;
  --psm-carbon: #101113;
  --psm-graphite: #191b1f;
  --psm-charcoal: #24262b;
  --psm-steel: #b6b7b7;
  --psm-silver: #d9dbdc;
  --psm-off-white: #f6f6f2;
  --psm-white: #ffffff;

  /* Functional only — never decorative */
  --psm-success: #2d8a57;
  --psm-warning: #b97800;
  --psm-error: #b42318;

  /* Semantic surfaces */
  --bg-page: var(--psm-off-white);
  --bg-cinematic: var(--psm-carbon);
  --bg-cinematic-2: var(--psm-graphite);
  --bg-card: var(--psm-white);
  --bg-inset: #eeeee9;

  --text-strong: #14161a;
  --text-body: #33363d;
  --text-muted: #5c616b;
  --text-on-dark: var(--psm-off-white);
  --text-on-dark-muted: #a9adb5;
  --text-on-yellow: var(--psm-black);

  --border: #dcded9;
  --border-strong: #c4c7c0;
  --border-dark: #34363c;

  --accent: var(--psm-yellow);
  --accent-ink: var(--psm-black);
  --focus-ring: #1a63ff; /* high-contrast focus, non-brand, AA on light+dark */

  /* Typography — one normal-width system (Inter). No condensed/stretched faces. */
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-display: var(--font-body);
  --font-heading: var(--font-body);
  --font-label: var(--font-body);
  --font-arabic: "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;

  /* Fluid type scale (clamp: min, preferred, max) */
  --step--1: clamp(0.833rem, 0.80rem + 0.16vw, 0.925rem);
  --step-0: clamp(1rem, 0.96rem + 0.20vw, 1.125rem);
  --step-1: clamp(1.20rem, 1.13rem + 0.35vw, 1.45rem);
  --step-2: clamp(1.44rem, 1.32rem + 0.60vw, 1.90rem);
  --step-3: clamp(1.73rem, 1.53rem + 1.00vw, 2.55rem);
  --step-4: clamp(2.07rem, 1.75rem + 1.60vw, 3.40rem);
  --step-5: clamp(2.49rem, 2.00rem + 2.45vw, 4.60rem);

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-body: 1.65;
  --measure: 68ch;

  /* Spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: 5rem;
  --space-3xl: 7rem;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(7, 7, 7, 0.06), 0 2px 6px rgba(7, 7, 7, 0.05);
  --shadow-md: 0 6px 20px rgba(7, 7, 7, 0.10);
  --shadow-lg: 0 18px 50px rgba(7, 7, 7, 0.20);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* Layout — one shared alignment grid for header, main and footer */
  --container-max: 1320px;
  --page-gutter: clamp(1rem, 3vw, 2.5rem);
  --container: var(--container-max);
  --container-narrow: 760px;
  --container-wide: 1440px;
  --header-h: 76px;
  --header-h-mobile: 68px;
  --utility-h: 38px;
  --bottomnav-h: 64px;

  /* Motion tokens */
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Z-index scale */
  --z-header: 100;
  --z-bottomnav: 90;
  --z-whatsapp: 80;
  --z-drawer: 200;
  --z-drawer-overlay: 190;
  --z-skiplink: 300;
  --z-toast: 320;

  color-scheme: light;
}

/* Reserve safe-area vars for notched devices */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}