/**
 * PintLog — colour palette
 * =============================
 * Edit the five palette colours below, then check the mapped tokens.
 * Tailwind reads these via ios.* classes (tailwind.config in index.html).
 *
 * Also update <meta name="theme-color"> in index.html to match --color-bg.
 */

html {
    color-scheme: dark;
    background: var(--color-bg);
}

:root {
    /* ── Your palette ───────────────────────────────────────────── */
    --blazing-flame: #4CB944;
    --white: #ffffff;
    --pacific-blue: #58a4b0;
    --charcoal-blue: #292F3D;
    --carbon-black: #1b1b1e;

    /* ── Backgrounds ─────────────────────────────────────────────── */
    --color-bg: var(--carbon-black);
    --color-grouped: var(--charcoal-blue);
    --color-secondary: #292e3a;
    --color-tertiary: #424a5c;

    /* Form fields — lighter than grouped cards so inputs stand out */
    --color-field-bg: #363f52;
    --color-field-border: rgba(255, 255, 255, 0.16);
    --color-field-focus-bg: #434c62;
    --color-field-focus-border: rgba(88, 164, 176, 0.45);

    /* ── Text ───────────────────────────────────────────────────── */
    --color-text: var(--white);
    --color-text-secondary: rgba(255, 255, 255, 0.68);
    --color-text-tertiary: rgba(255, 255, 255, 0.38);
    --color-text-muted: rgba(255, 255, 255, 0.75);
    --color-text-muted-soft: rgba(255, 255, 255, 0.55);

    /* ── Borders ─────────────────────────────────────────────────── */
    --color-separator: rgba(255, 255, 255, 0.12);

    /* ── Accent colours ──────────────────────────────────────────── */
    --color-accent: var(--pacific-blue);
    --color-success: var(--pacific-blue);
    --color-danger: var(--blazing-flame);
    --color-warning: var(--blazing-flame);

    /* ── Surfaces & chrome ───────────────────────────────────────── */
    --color-fill: rgba(88, 164, 176, 0.22);
    --color-fill-subtle: rgba(88, 164, 176, 0.12);
    --color-segmented-active: #4a5368;
    --color-tab-bar: rgba(27, 27, 30, 0.94);
    --color-header-bg: rgba(27, 27, 30, 0.85);
    --color-modal-backdrop: rgba(27, 27, 30, 0.65);
    --color-picker-menu: rgba(55, 63, 81, 0.96);
    --color-switch-thumb: var(--white);
    --color-chart-initials: var(--charcoal-blue);
    --color-shadow: rgba(0, 0, 0, 0.35);

    /* ── Gradients ───────────────────────────────────────────────── */
    --gradient-hero: linear-gradient(145deg, var(--charcoal-blue) 0%, var(--carbon-black) 100%);
    --gradient-trip-active: linear-gradient(145deg, rgba(88, 164, 176, 0.18) 0%, var(--charcoal-blue) 100%);
    --gradient-auth-icon: linear-gradient(to bottom right, var(--blazing-flame), #c93d18);
    --gradient-photo-overlay: linear-gradient(to top, rgba(27, 27, 30, 0.9) 0%, rgba(27, 27, 30, 0.5) 50%, transparent 100%);
    --color-auth-icon-glow: rgba(241, 80, 37, 0.25);
    --color-hero-glow: rgba(241, 80, 37, 0.12);

    /* ── Layout ──────────────────────────────────────────────────── */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* ── Typography ──────────────────────────────────────────────── */
    --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;

    /* ── Border radius ───────────────────────────────────────────── */
    --radius-ios: 12px;
    --radius-ios-lg: 16px;
    --radius-ios-xl: 22px;
}