/* RoamZivo design tokens · approved direction "Daylight, combined" · October 2026 */
/* Fonts are linked from includes/vm_head.php so the browser finds them before this file is parsed. */

:root {
  /* Brand */
  --rz-blue: #0080E0;          /* Electric blue · primary actions, links on dark */
  --rz-sky: #00A0F0;           /* Sky blue · hover, arc highlight */
  --rz-deep: #1020B0;          /* Deep blue · pressed, gradient base */
  --rz-ink: #080D1A;           /* Ink · all text, dark surfaces */
  --rz-cloud: #F1F5FD;         /* Cloud · page background */
  --rz-white: #FFFFFF;         /* White · cards */

  /* Neutrals */
  --rz-n-700: #2E384D;         /* body text secondary */
  --rz-n-600: #4A5468;         /* captions, meta */
  --rz-n-500: #6B7487;         /* disabled text */
  --rz-n-400: #9AA2B2;         /* unselected radio, dashed borders */
  --rz-n-300: #C6CCD8;         /* field borders */
  --rz-n-200: #DDE2EC;         /* ring track, disabled fill */
  --rz-n-100: #EAEEF6;         /* dividers, expired card */

  /* Functional */
  --rz-link: #0060B0;          /* link text on light (AA for small text) */
  --rz-focus-ring: #CFE7FB;
  --rz-step-tint: #CCE8FB;     /* outline step number fill */
  --rz-mat: #E2F1FD;           /* phone mock mat, info pill bg */

  /* Status (amber is ONLY for low data) */
  --rz-ok: #14B866;      --rz-ok-text: #0B7A42;   --rz-ok-bg: #E3F7EC;
  --rz-low: #F5A524;     --rz-low-text: #8A5200;  --rz-low-bg: #FFF2DB;
  --rz-info: #0080E0;    --rz-info-text: #0060B0; --rz-info-bg: #E2F1FD;
  --rz-muted: #9AA2B2;   --rz-muted-text: #4A5468; --rz-muted-bg: #EAEEF6;
  --rz-error: #C8303A;   --rz-error-text: #A3222B;

  /* The only gradient allowed: the logo arc, used for usage bars and rings */
  --rz-arc-gradient: linear-gradient(90deg, #1020B0 0%, #0080E0 60%, #00A0F0 100%);

  /* Type */
  --rz-font-display: "Sora", system-ui, sans-serif;
  --rz-font-body: "IBM Plex Sans", system-ui, sans-serif;
  --rz-font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Type scale · mobile values (390px first) */
  --rz-fs-display: 38px;   --rz-lh-display: 1.02;  /* hero "Stay Connected. Anywhere." */
  --rz-fs-h1: 34px;        --rz-lh-h1: 1.05;       /* page titles */
  --rz-fs-h2: 28px;        --rz-lh-h2: 1.1;        /* section titles */
  --rz-fs-h3: 17px;        --rz-lh-h3: 1.25;       /* card titles */
  --rz-fs-plan: 22px;                              /* plan GB */
  --rz-fs-usage: 40px;                             /* GB left */
  --rz-fs-price: 26px;                             /* totals */
  --rz-fs-body-lg: 16px;   --rz-lh-body: 1.55;
  --rz-fs-body: 15px;
  --rz-fs-small: 14px;
  --rz-fs-caption: 13px;
  --rz-fs-micro: 12px;
  --rz-tracking-display: -0.035em;
  --rz-tracking-heading: -0.02em;

  /* Spacing (4px base) */
  --rz-s-1: 4px;  --rz-s-2: 8px;  --rz-s-3: 12px; --rz-s-4: 16px; --rz-s-5: 20px; --rz-s-6: 24px;
  --rz-s-8: 32px; --rz-s-10: 40px; --rz-s-12: 48px; --rz-s-14: 56px; --rz-s-16: 64px; --rz-s-18: 72px;
  --rz-s-24: 96px; --rz-s-30: 120px;
  --rz-gutter: 20px;           /* page side padding */
  --rz-section: 56px;          /* space between sections */

  /* Radii */
  --rz-r-pill: 999px;          /* buttons, fields, chips, list rows */
  --rz-r-tile: 24px;           /* spec tiles, small cards */
  --rz-r-card: 28px;           /* cards */
  --rz-r-panel: 32px;          /* panels, summary */
  --rz-r-hero: 40px;           /* hero photo, footer top */
  --rz-r-device: 48px;         /* app frame (mockups only) */

  /* Shadows */
  --rz-shadow-sticky: 0 20px 50px rgba(8, 13, 26, .08);
  --rz-shadow-pop: 0 20px 50px rgba(8, 13, 26, .16);
  --rz-shadow-bar: 0 12px 30px rgba(8, 13, 26, .16);
  --rz-shadow-ring: 0 8px 18px rgba(0, 128, 224, .28);
  --rz-focus: 0 0 0 4px var(--rz-focus-ring);

  /* Sizes */
  --rz-tap: 44px;              /* minimum hit target */
  --rz-btn-h: 56px;  --rz-btn-h-lg: 64px;  --rz-field-h: 56px;
  --rz-container: 1440px;

  /* Breakpoints (reference; use in media queries) */
  --rz-bp-sm: 390px; --rz-bp-md: 768px; --rz-bp-lg: 1024px; --rz-bp-xl: 1440px;
}

@media (min-width: 1024px) {
  :root {
    --rz-fs-display: 72px;   --rz-lh-display: 1;
    --rz-fs-h1: 56px;
    --rz-fs-h2: 44px;
    --rz-fs-h3: 22px;
    --rz-fs-plan: 28px;
    --rz-fs-usage: 56px;
    --rz-fs-price: 32px;
    --rz-fs-body-lg: 19px;
    --rz-fs-body: 17px;
    --rz-gutter: 72px;
    --rz-section: 120px;
  }
}

/* Dark theme (app only; website is light only) */
[data-theme="dark"] {
  --rz-cloud: #080D1A;
  --rz-white: #0E1628;
  --rz-ink: #FFFFFF;
  --rz-n-700: #C6CCD8;
  --rz-n-600: #A7B1C6;
  --rz-n-200: #1C2436;
  --rz-n-100: #1C2436;
  --rz-link: #6CCBFF;
  --rz-ok-text: #4BE39A;  --rz-ok-bg: #0F2E22;
  --rz-low-text: #F5C16C; --rz-low-bg: #33240A;
  --rz-info-text: #6CCBFF; --rz-info-bg: #0B2440;
  --rz-mat: #0B2440;
}