/* Petro Extrusion design tokens — generated, do not hand-edit.
   Palette derived from the existing logo (petro-extrusion.png).
   Every pair verified against WCAG 2.1 AA. */

:root{
  /* color */
  --pe-ink-950: #0A1420;
  --pe-ink-900: #0F1E2E;
  --pe-ink-800: #1A2E42;
  --pe-ink-700: #2A4258;
  --pe-ink-600: #455D74;
  --pe-ink-500: #647C92;
  --pe-ink-400: #8B9EB0;
  --pe-ink-300: #B3C1CE;
  --pe-ink-200: #D4DCE4;
  --pe-ink-100: #EAEFF3;
  --pe-ink-50: #F6F8FA;
  --pe-white: #FFFFFF;
  --pe-brand-red: #D92027;
  --pe-brand-red-hover: #AF1920;
  --pe-brand-red-logo: #E2383F;
  --pe-brand-ink: #231F20;

  /* semantic */
  --pe-surface: var(--pe-white);
  --pe-surface-sunken: var(--pe-ink-50);
  --pe-surface-dark: var(--pe-ink-900);
  --pe-text: var(--pe-ink-800);
  --pe-text-muted: var(--pe-ink-600);
  --pe-text-on-dark: var(--pe-ink-100);
  --pe-heading: var(--pe-ink-900);
  --pe-cta: var(--pe-brand-red);
  --pe-cta-hover: var(--pe-brand-red-hover);
  --pe-divider: var(--pe-ink-200);        /* decorative only */
  --pe-border-input: var(--pe-ink-500);   /* interactive, meets 3:1 */
  --pe-focus: var(--pe-brand-red);

  /* type scale — 1.25 ratio, 16px base */
  --pe-text-2xs: 0.64rem;
  --pe-text-xs: 0.8rem;
  --pe-text-sm: 0.9rem;
  --pe-text-base: 1.0rem;
  --pe-text-lg: 1.25rem;
  --pe-text-xl: 1.563rem;
  --pe-text-2xl: 1.953rem;
  --pe-text-3xl: 2.441rem;
  --pe-text-4xl: 3.052rem;
  --pe-text-5xl: 3.815rem;

  /* spacing — 8px base */
  --pe-space-0: 0rem;
  --pe-space-1: 0.25rem;
  --pe-space-2: 0.5rem;
  --pe-space-3: 1rem;
  --pe-space-4: 1.5rem;
  --pe-space-5: 2rem;
  --pe-space-6: 2.5rem;
  --pe-space-7: 3rem;
  --pe-space-8: 4rem;
  --pe-space-9: 5rem;
  --pe-space-10: 6rem;
  --pe-space-11: 8rem;
  --pe-space-12: 10rem;

  /* radius — 2-radius system */
  --pe-radius-sm: 4px;
  --pe-radius-lg: 12px;

  /* elevation — single scale */
  --pe-shadow-1: 0 1px 2px rgba(10,20,32,.06), 0 1px 3px rgba(10,20,32,.10);
  --pe-shadow-2: 0 4px 8px rgba(10,20,32,.08), 0 2px 4px rgba(10,20,32,.06);
  --pe-shadow-3: 0 12px 24px rgba(10,20,32,.12), 0 4px 8px rgba(10,20,32,.08);

  /* motion */
  --pe-ease: cubic-bezier(.2,.7,.3,1);
  --pe-dur-fast: 120ms;
  --pe-dur: 220ms;
  --pe-dur-slow: 420ms;
}

@media (prefers-reduced-motion: reduce){
  :root{ --pe-dur-fast:0ms; --pe-dur:0ms; --pe-dur-slow:0ms; }
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* focus: visible ring, never outline:none */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline: 3px solid var(--pe-focus); outline-offset: 2px; border-radius: var(--pe-radius-sm);
}