/*
 * PAM JAYA SuperApps V2 — design tokens (single source of every value).
 * Only :root here. DaisyUI mapping lives in css/theme.css, base rules in css/base.css.
 *
 * HANDOVER RULE: values replicate LAPOR PAM v1.3.17 as it ships today, sampled
 * from ../screenshots-eksisting/. Pairs that fail WCAG AA are kept on purpose and
 * listed in docs/shared/rekomendasi-aksesibilitas.md — do not "fix" them here silently.
 * Colours stay hex on purpose: DaisyUI v5 accepts any CSS colour.
 */

:root {
  /* ---------- Tier 1: primitive (sampled from the existing app) ---------- */
  --pj-blue-50: #E0F2FF;      /* bottom-nav surface */
  --pj-blue-100: #D1EBF7;     /* "Berita PAM" chip; reserved */
  --pj-blue-400: #0D99FF;     /* outline input icons */
  --pj-blue-500: #199BD5;     /* brand blue: header, "Masuk" button, links */
  --pj-blue-700: #0A6E9C;     /* focus ring on light surfaces (rekomendasi-aksesibilitas.md) */
  --pj-periwinkle-400: #7D92C6; /* inactive bottom-nav label */
  --pj-logo-blue: #1046E8;    /* logo artwork only */

  --pj-orange-400: #FF9700;   /* "Daftar" button, active onboarding dot */
  --pj-orange-500: #FE8043;   /* main CTA, strong links */

  --pj-white: #FFFFFF;
  --pj-gray-50: #F4F8FB;
  --pj-gray-100: #E3EAF0;
  --pj-gray-150: #EFEFEF;     /* field underline */
  --pj-gray-200: #D9D9D9;     /* idle onboarding dot */
  --pj-gray-450: #8B8B8B;     /* input placeholder */
  --pj-gray-500: #989898;     /* field labels, onboarding body */
  --pj-slate-500: #6C7278;    /* secondary text ("Belum punya akun?") */
  --pj-black: #000000;        /* titles */
  --pj-navy-800: #1F2A33;

  --pj-green-700: #1E7A47;
  --pj-amber-500: #E5A100;
  --pj-red-700: #B42318;
  --pj-red-500: #D93A3A;      /* outage area: active (docs/05 §1) */

  --pj-sky-top: #BDE9FB;
  --pj-sky-mid: #EEF8FD;
  --pj-sky-warm: #FCE6D2;
  --pj-onboard-top: #F7FDFF;
  --pj-onboard-bottom: #FFF5F0;

  /* ---------- Tier 2: semantic (project) ---------- */
  --pj-color-text-muted: var(--pj-gray-500);
  --pj-color-text-secondary: var(--pj-slate-500);
  --pj-color-placeholder: var(--pj-gray-450);
  --pj-color-icon: var(--pj-blue-400);
  --pj-color-divider: var(--pj-gray-150);
  --pj-color-link: var(--pj-blue-500);
  --pj-color-link-strong: var(--pj-orange-500);
  --pj-color-text-on-sky: var(--pj-blue-500);
  --pj-color-surface-info: var(--pj-blue-50);
  --pj-color-border-strong: var(--pj-gray-200);
  --pj-color-indicator-active: var(--pj-orange-400);
  --pj-color-indicator-idle: var(--pj-gray-200);
  --pj-color-header: var(--pj-blue-500);           /* blue page header (17-cek-tagihan) */
  --pj-color-surface-nav: var(--pj-blue-50);       /* bottom navigation */
  --pj-color-nav-inactive: var(--pj-periwinkle-400);
  --pj-color-nav-active: var(--pj-orange-500);
  --pj-color-chip: var(--pj-blue-100);             /* category chips ("Berita PAM") */
  --pj-color-outage-active: var(--pj-red-500);     /* outage polygons: 35% fill + 2px stroke */
  --pj-color-outage-planned: var(--pj-amber-500);
  --pj-color-outage-recovery: var(--pj-blue-500);

  --pj-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;       /* body, forms */
  --pj-font-display: "Archivo", "Inter", ui-sans-serif, sans-serif;    /* onboarding/dialog titles */

  --pj-duration-fast: 200ms;
  --pj-duration-base: 450ms;
  --pj-duration-slow: 700ms;
  --pj-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --pj-ease-standard: ease-in-out;

  --pj-z-toast: 50;
  --pj-z-nav: 30;
  --pj-z-fab: 40;
  --pj-z-banner: 60;

  --pj-focus-ring-width: 2px;
  --pj-focus-ring-offset: 2px;
  --pj-focus-ring-color: var(--pj-blue-700);         /* >= 3:1 on white, nav surface and sky hero */
  --pj-focus-ring-color-on-brand: var(--pj-white);   /* inside the blue header ([data-pj-on-brand]) */

  /* ---------- Tier 3: component ---------- */
  --pj-device-w: 390px;        /* presentation phone frame (md and up) */
  --pj-device-h: 844px;
  --pj-device-radius: 2.75rem;
  --pj-touch-min: 3rem;        /* touch target >= 48dp */
  --pj-cta-h: 3.375rem;        /* existing CTA pill: 50dp on a 360dp screen */
  --pj-card-shadow: 0 0.25rem 1.5rem rgb(0 0 0 / 0.06);   /* form card on "Masuk" */
  --pj-otp-cell: 3.25rem;
  --pj-pin-dot: 1rem;
  --pj-keypad-key: 4rem;
  --pj-icon-badge: 4rem;
  --pj-step-dot: 0.5rem;       /* onboarding indicator dot */
  --pj-step-dot-active: 1.5rem;
  --pj-menu-icon: 3.75rem;     /* 3D service icon tile on the home grid */
  --pj-bottom-nav-h: 5rem;
  --pj-page-header-h: 3.5rem;
  --pj-sheet-radius: 1.75rem;  /* bottom sheet top corners ("Menu Lapor PAM") */
  --pj-fab-size: 4.25rem;      /* #TanyaVanya mascot */
}