/* Design tokens. Every value the rest of the theme uses comes from here. */

:root {
  /* Brand — measured from the mockups (docs/design), not eyeballed.
     Red text uses a deeper shade than the button fill so prices and links
     keep 4.5:1 contrast on white; buttons use the brighter gradient. */
  --pp-red: #D00A29;
  --pp-red-bright: #E90A2C;
  --pp-red-dark: #B8082A;
  --pp-red-soft: #FDE4E5;
  --pp-red-gradient: linear-gradient(180deg, #F5102E 0%, #C90A2B 100%);
  --pp-navy: #0A2547;
  --pp-bg: #F6F7FC;

  /* Neutrals */
  --pp-white: #FFFFFF;
  --pp-surface: #FBFCFE;
  --pp-box: #f9fafe;       /* background of every box: cards, panels, header bar, fields */
  --pp-ink: #1B2437;
  --pp-ink-soft: #4C536F;
  --pp-muted: #84879A;
  --pp-line: #E8ECF3;
  --pp-divider: #D6DCE6;   /* group dividers (trust badges, footer): a step stronger than --pp-line */
  --pp-edge: #ECEFF5;
  --pp-tint: #F2F5FA;
  --pp-search-bg: #F6F8FB; /* header search field: a shade lighter than --pp-tint */

  /* Status */
  --pp-success: #1E9E5A;
  --pp-success-soft: #E6F6ED;

  /* Radii */
  --pp-radius: 24px;
  --pp-radius-sm: 20px;
  --pp-radius-xs: 12px;
  --pp-radius-pill: 999px;

  /* Elevation — nearly flat. In the mockups cards sit almost on the page
     colour and are separated by a hairline edge, not by drop shadow. */
  --pp-shadow-sm: 0 1px 2px rgba(10, 37, 71, .03);
  --pp-shadow: 0 1px 2px rgba(10, 37, 71, .03), 0 6px 18px rgba(10, 37, 71, .035);
  --pp-shadow-lg: 0 2px 4px rgba(10, 37, 71, .04), 0 12px 28px rgba(10, 37, 71, .06);
  --pp-shadow-red: 0 6px 16px rgba(233, 10, 44, .22);
  --pp-overlay: rgba(10, 37, 71, .45); /* dims the page behind a dialog */

  /* Spacing scale */
  --pp-sp-1: 4px;
  --pp-sp-2: 8px;
  --pp-sp-3: 12px;
  --pp-sp-4: 16px;
  --pp-sp-5: 24px;
  --pp-sp-6: 32px;
  --pp-sp-7: 48px;
  --pp-sp-8: 64px;
  --pp-sp-9: 96px;

  /* Vertical gap between home page sections. */
  --pp-section-gap: 80px;

  /* Height of the sticky header row. The home hero slides up by this much
     so its background runs behind the header, as in the mockup. */
  --pp-header-h: 108px;

  /* Layout */
  --pp-container: 1320px;
  --pp-gutter: 16px;

  /* Type — font family is swapped per language below */
  --pp-font: "Heebo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pp-fs-xs: .8125rem;
  --pp-fs-sm: .875rem;
  --pp-fs-md: 1rem;
  --pp-fs-lg: 1.125rem;
  --pp-fs-xl: 1.375rem;
  --pp-fs-2xl: 1.75rem;
  --pp-fs-3xl: 2.25rem;
  --pp-fs-4xl: 3rem;

  --pp-transition: .2s ease;
}

/* Font per language. Set on :root via html[lang] so it cascades everywhere. */
html[lang^="ar"] {
  --pp-font: "IBM Plex Sans Arabic", system-ui, sans-serif;
}

html[lang^="en"] {
  --pp-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (max-width: 1024px) {
  :root {
    --pp-fs-3xl: 1.875rem;
    --pp-fs-4xl: 2.25rem;
    --pp-sp-9: 64px;
    --pp-section-gap: 64px;
  }
}

@media (max-width: 600px) {
  :root {
    --pp-radius: 20px;
    --pp-radius-sm: 16px;
    --pp-fs-3xl: 1.5rem;
    --pp-fs-4xl: 1.875rem;
    --pp-sp-8: 40px;
    --pp-sp-9: 48px;
    --pp-section-gap: 48px;
  }
}