/*
 * Canonical design tokens for the "ph-" design system (see the sitewide
 * Bootstrap-removal/revamp plan). Every stylesheet in the app reads from
 * these ph-prefixed custom properties — the older unprefixed color, radius
 * and shadow token names from the pre-migration design have been fully
 * retired now that every consumer has moved onto the scale below.
 *
 * Color ramps below are generated on a fixed hue/saturation (H≈177°, S≈78%)
 * anchored at the real brand teal (#10847e, the color of the shipped logo
 * asset banner.svg/banner-inverse.svg) so --ph-color-primary-600 below is
 * exactly that brand color. Adjust individual stops visually if a design
 * review calls for it — the anchor stop (600) should stay in sync with the
 * logo artwork.
 */
:root {
    /* ---------- Brand / primary teal ramp ---------- */
    --ph-color-primary-50:  #e8fcfb;
    --ph-color-primary-100: #d2f9f7;
    --ph-color-primary-200: #a4f4f0;
    --ph-color-primary-300: #6eede7;
    --ph-color-primary-400: #33e6dd;
    --ph-color-primary-500: #18bfb6;
    --ph-color-primary-600: #10847e; /* brand anchor — matches logo artwork */
    --ph-color-primary-700: #0d6864;
    --ph-color-primary-800: #0a524e;
    --ph-color-primary-900: #073b38;

    /* ---------- Accent (warm, used sparingly against the teal brand) ---------- */
    --ph-color-accent: #ffd166;
    --ph-color-whatsapp: #25d366;

    /* ---------- Neutral (teal-tinted gray) scale ---------- */
    --ph-gray-50:  #f8fafa;
    --ph-gray-100: #eef2f2;
    --ph-gray-200: #dfe6e6;
    --ph-gray-300: #c5d0d0;
    --ph-gray-400: #9aa8a8;
    --ph-gray-500: #708080;
    --ph-gray-600: #566565;
    --ph-gray-700: #414d4d;
    --ph-gray-800: #2b3333;
    --ph-gray-900: #1a1f1f;

    /* ---------- Semantic colors (each a foreground + soft background pair) ---------- */
    --ph-color-success:    #1a9c6c;
    --ph-color-success-bg: #e7f8f0;
    --ph-color-danger:     #d9364a;
    --ph-color-danger-bg:  #fdecee;
    --ph-color-warning:    #92400e;
    --ph-color-warning-bg: #fef3c7;
    --ph-color-info:       #1d4ed8;
    --ph-color-info-bg:    #eff6ff;

    /* ---------- Surface / text roles ---------- */
    --ph-color-text:       var(--ph-gray-900);
    --ph-color-text-muted: var(--ph-gray-600);
    --ph-color-border:     var(--ph-gray-200);
    --ph-color-bg:         #ffffff;
    --ph-color-bg-soft:    var(--ph-color-primary-50);
    --ph-color-surface:    #ffffff;
    --ph-color-contrast:   #ffffff;

    /* ---------- Typography ---------- */
    --ph-font-sans: "Roboto", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    --ph-fs-xs:   0.75rem;   /* 12px */
    --ph-fs-sm:   0.875rem;  /* 14px */
    --ph-fs-base: 1rem;      /* 16px */
    --ph-fs-md:   1.125rem;  /* 18px */
    --ph-fs-lg:   1.25rem;   /* 20px */
    --ph-fs-xl:   1.5rem;    /* 24px */
    --ph-fs-2xl:  1.875rem;  /* 30px */
    --ph-fs-3xl:  2.25rem;   /* 36px */
    --ph-fs-4xl:  3rem;      /* 48px */
    --ph-fw-regular:  400;
    --ph-fw-medium:   500;
    --ph-fw-semibold: 600;
    --ph-fw-bold:     700;
    --ph-fw-black:    800;
    --ph-lh-tight:   1.2;
    --ph-lh-snug:    1.35;
    --ph-lh-normal:  1.5;
    --ph-lh-relaxed: 1.7;

    /* ---------- Spacing scale (4px base) ---------- */
    --ph-space-0:  0;
    --ph-space-1:  4px;
    --ph-space-2:  8px;
    --ph-space-3:  12px;
    --ph-space-4:  16px;
    --ph-space-5:  20px;
    --ph-space-6:  24px;
    --ph-space-7:  32px;
    --ph-space-8:  40px;
    --ph-space-9:  48px;
    --ph-space-10: 64px;
    --ph-space-11: 80px;
    --ph-space-12: 96px;

    /* ---------- Radius scale ---------- */
    --ph-radius-sm:   6px;
    --ph-radius-md:   10px;
    --ph-radius-lg:   16px;
    --ph-radius-xl:   24px;
    --ph-radius-pill: 999px;

    /* ---------- Shadow scale ---------- */
    --ph-shadow-sm: 0 1px 3px rgba(16, 24, 24, 0.08), 0 1px 2px rgba(16, 24, 24, 0.06);
    --ph-shadow-md: 0 4px 12px rgba(16, 24, 24, 0.10);
    --ph-shadow-lg: 0 10px 30px rgba(16, 132, 126, 0.10);
    --ph-shadow-xl: 0 24px 48px rgba(11, 93, 89, 0.16);

    /* ---------- Z-index scale ---------- */
    --ph-z-dropdown: 1000;
    --ph-z-sticky:   1020;
    --ph-z-overlay:  1040;
    --ph-z-modal:    1050;
    --ph-z-popover:  1060;
    --ph-z-toast:    1080;

    /*
     * ---------- Breakpoint (documentation only) ----------
     * This is a deliberately two-state system: mobile (default/unprefixed
     * styles) and desktop, split at a single breakpoint. Plain CSS custom
     * properties can't be substituted into @media conditions, so this value
     * is not consumable directly — every "-d-" (desktop) rule in ph-grid.css,
     * ph-utilities.css, and ph-components.css must write the literal
     * `@media (min-width: 900px)` themselves. Keep that number in sync with
     * this comment if it's ever revisited; there is intentionally no
     * sm/md/xl/2xl tier.
     * --ph-bp-desktop: 900px;
     */

}

body {
    letter-spacing: 0.35px;
}