/* ============================================================
   Vei-Rise portal — shared Material Design 3 token contract
   Load before any component stylesheet. Hosts opt in with
   data-ui-theme="veirise" (operator portal) or "umobile".
   ============================================================ */

[data-ui-theme] {
  /* Typography: no new network font dependency. */
  --md-sys-typescale-font: "Roboto Flex", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --md-sys-typescale-body-size: 1rem;      /* 16px */
  --md-sys-typescale-body-line: 1.5rem;    /* 24px */
  --md-sys-typescale-label-size: 0.875rem; /* 14px */
  --md-sys-typescale-label-line: 1.25rem;  /* 20px */
  --md-sys-typescale-title-size: 1.375rem; /* 22px */
  --md-sys-typescale-title-line: 1.75rem;  /* 28px */
  --md-sys-typescale-headline-size: 2rem;  /* 32px */
  --md-sys-typescale-headline-line: 2.5rem;/* 40px */

  /* Shape */
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* Spacing (4px base) */
  --md-sys-space-1: 4px;
  --md-sys-space-2: 8px;
  --md-sys-space-3: 12px;
  --md-sys-space-4: 16px;
  --md-sys-space-6: 24px;
  --md-sys-space-8: 32px;

  /* Elevation: surface fill/border at level 0; restrained level 1 for cards. */
  --md-sys-elevation-1: 0 1px 2px rgba(27, 28, 29, 0.12), 0 1px 3px 1px rgba(27, 28, 29, 0.06);
  --md-sys-elevation-2: 0 2px 6px 2px rgba(27, 28, 29, 0.10), 0 1px 2px rgba(27, 28, 29, 0.12);

  /* State layers */
  --md-sys-state-hover-opacity: 8%;
  --md-sys-state-focus-opacity: 12%;
  --md-sys-state-pressed-opacity: 12%;

  /* Motion */
  --md-sys-motion-duration-short: 150ms;
  --md-sys-motion-duration-medium: 200ms;
  --md-sys-motion-easing: cubic-bezier(0.2, 0, 0, 1);

  /* Focus */
  --md-sys-focus-outline-width: 2px;
  --md-sys-focus-outline-offset: 2px;
  --md-sys-target-min: 44px;
  --md-sys-target-comfortable: 48px;
}

/* ---- Operator portal / Vei-Rise (light scheme) ---- */
[data-ui-theme="veirise"] {
  --md-sys-color-brand-fill: #B3261E;
  --md-sys-color-on-brand-fill: #FFFFFF;
  --md-sys-color-primary: #B3261E;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #FFDAD5;
  --md-sys-color-on-primary-container: #410002;
  --md-sys-color-secondary: #2E3A46;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #D9E2EC;
  --md-sys-color-on-secondary-container: #111C26;
  --md-sys-color-surface: #FBF9F7;
  --md-sys-color-on-surface: #1B1C1D;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F7F4F1;
  --md-sys-color-surface-container: #F3EFEC;
  --md-sys-color-surface-container-high: #EDE8E4;
  --md-sys-color-on-surface-variant: #4E4644;
  --md-sys-color-outline: #837470;
  --md-sys-color-outline-variant: #D6C8C3;
  --md-sys-color-error: #8C1D18;
  --md-sys-color-error-container: #FFDAD6;
  --md-sys-color-on-error-container: #410002;
  /* Semantic status roles, kept visually distinct from brand red. */
  --md-sys-color-success: #1B5E20;
  --md-sys-color-success-container: #CDEBD0;
  --md-sys-color-on-success-container: #0B3D12;
  --md-sys-color-warning: #6B4400;
  --md-sys-color-warning-container: #FFE9B8;
  --md-sys-color-on-warning-container: #3F2800;
  --md-sys-color-brand-accent: #B3261E;
}

/* ---- U Mobile public host ---- */
[data-ui-theme="umobile"] {
  /* U Mobile orange as the filled brand colour with dark text (white on #F87000 is only 2.87:1). */
  --md-sys-color-brand-fill: #F87000;
  --md-sys-color-on-brand-fill: #1F1300;
  --md-sys-color-primary: #A94700;            /* text-safe orange: 5.85:1 on white */
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #FFDCC6;
  --md-sys-color-on-primary-container: #3A1A00;
  --md-sys-color-secondary: #F87000;
  --md-sys-color-on-secondary: #1F1300;
  --md-sys-color-secondary-container: #FFE6D3;
  --md-sys-color-on-secondary-container: #3A1A00;
  --md-sys-color-surface: #FFFAF6;
  --md-sys-color-on-surface: #231B16;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #FFF4EB;
  --md-sys-color-surface-container: #FFECDD;
  --md-sys-color-surface-container-high: #FCE3D0;
  --md-sys-color-on-surface-variant: #52443B;
  --md-sys-color-outline: #85736A;
  --md-sys-color-outline-variant: #E6CDBD;
  --md-sys-color-error: #8C1D18;
  --md-sys-color-error-container: #FFDAD6;
  --md-sys-color-on-error-container: #410002;
  --md-sys-color-success: #1B5E20;
  --md-sys-color-success-container: #CDEBD0;
  --md-sys-color-on-success-container: #0B3D12;
  --md-sys-color-warning: #6B4400;
  --md-sys-color-warning-container: #FFE9B8;
  --md-sys-color-on-warning-container: #3F2800;
  --md-sys-color-brand-accent: #F87000;
}

/* ---- Telecom Fiji operator (blue/gold from the pilot theme) ---- */
[data-ui-theme="tfl"] {
  --md-sys-color-brand-fill: #0051D4;
  --md-sys-color-on-brand-fill: #FFFFFF;
  --md-sys-color-primary: #0051D4;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #DBE7FF;
  --md-sys-color-on-primary-container: #001B4A;
  --md-sys-color-secondary: #1E293B;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #FFF3C0;
  --md-sys-color-on-secondary-container: #5C3A00;
  --md-sys-color-surface: #F6F8FC;
  --md-sys-color-on-surface: #0F172A;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F1F4F9;
  --md-sys-color-surface-container: #EAEEF6;
  --md-sys-color-surface-container-high: #E2E8F0;
  --md-sys-color-on-surface-variant: #475569;
  --md-sys-color-outline: #7C8698;
  --md-sys-color-outline-variant: #CBD5E1;
  --md-sys-color-error: #8C1D18;
  --md-sys-color-error-container: #FFDAD6;
  --md-sys-color-on-error-container: #410002;
  --md-sys-color-success: #1B5E20;
  --md-sys-color-success-container: #CDEBD0;
  --md-sys-color-on-success-container: #0B3D12;
  --md-sys-color-warning: #6B4400;
  --md-sys-color-warning-container: #FFE9B8;
  --md-sys-color-on-warning-container: #3F2800;
  --md-sys-color-brand-accent: #F4B700;
}

@media (prefers-reduced-motion: reduce) {
  [data-ui-theme] {
    --md-sys-motion-duration-short: 0ms;
    --md-sys-motion-duration-medium: 0ms;
  }
}