/*
 * MYLI DEFAULT BRAND THEME
 * Replace this file at container startup to white-label.
 * All colour values are full CSS colour values (no bare HSL components).
 * Fonts are loaded here so they are also swappable per client.
 *
 * Brand source: Myli Style Guide 1.0
 * Dark Navy #0D1335 · Light Blue #AED7E4 · Red #EF384E · Medium Blue #0B8BCC
 * Fonts: T-Star Heavy→Barlow Semi Condensed, Din Rounded→Quicksand, Stuart→Merriweather
 */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600;700&family=Quicksand:wght@400;500;600&family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  /* ── Typography ──────────────────────────────────────── */
  --font-sans: 'Quicksand', ui-sans-serif, system-ui, sans-serif;
  --font-heading: 'Barlow Semi Condensed', ui-sans-serif, sans-serif;
  --font-serif: 'Merriweather', ui-serif, Georgia, serif;

  /* ── Surfaces ────────────────────────────────────────── */
  --background: oklch(1 0 0);                          /* white */
  --foreground: oklch(0.162 0.059 258.3);              /* Dark Navy #0D1335 */

  --card: oklch(1 0 0);
  --card-foreground: oklch(0.162 0.059 258.3);

  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.162 0.059 258.3);

  /* ── Interactive ─────────────────────────────────────── */
  --primary: oklch(0.527 0.149 233.6);                 /* Medium Blue #0B8BCC */
  --primary-foreground: oklch(0.985 0 0);

  --secondary: oklch(0.955 0.014 216.7);               /* Light Blue tint */
  --secondary-foreground: oklch(0.162 0.059 258.3);

  --muted: oklch(0.965 0.007 216.7);
  --muted-foreground: oklch(0.5 0.025 258.3);

  --accent: oklch(0.855 0.041 218.4);                  /* Light Blue #AED7E4 */
  --accent-foreground: oklch(0.162 0.059 258.3);

  --destructive: oklch(0.617 0.209 16.4);              /* Red #EF384E */
  --destructive-foreground: oklch(0.985 0 0);

  /* ── Borders & Inputs ────────────────────────────────── */
  --border: oklch(0.91 0.01 216.7);
  --input: oklch(0.91 0.01 216.7);
  --ring: oklch(0.527 0.149 233.6);                    /* Medium Blue */

  /* ── Shape ───────────────────────────────────────────── */
  --radius: 0.375rem;

  /* ── Myli brand primitives (for components needing exact brand match) ── */
  --myli-navy: oklch(0.162 0.059 258.3);               /* #0D1335 */
  --myli-light-blue: oklch(0.855 0.041 218.4);         /* #AED7E4 */
  --myli-red: oklch(0.617 0.209 16.4);                 /* #EF384E */
  --myli-medium-blue: oklch(0.527 0.149 233.6);        /* #0B8BCC */
}

.dark {
  --background: oklch(0.12 0.036 258.3);
  --foreground: oklch(0.92 0.014 216.7);

  --card: oklch(0.155 0.044 258.3);
  --card-foreground: oklch(0.92 0.014 216.7);

  --popover: oklch(0.155 0.044 258.3);
  --popover-foreground: oklch(0.92 0.014 216.7);

  --primary: oklch(0.627 0.149 233.6);                 /* Lighter Medium Blue for dark mode */
  --primary-foreground: oklch(0.162 0.059 258.3);

  --secondary: oklch(0.22 0.03 258.3);
  --secondary-foreground: oklch(0.92 0.014 216.7);

  --muted: oklch(0.2 0.025 258.3);
  --muted-foreground: oklch(0.68 0.018 216.7);

  --accent: oklch(0.22 0.03 258.3);
  --accent-foreground: oklch(0.92 0.014 216.7);

  --destructive: oklch(0.54 0.19 16.4);
  --destructive-foreground: oklch(0.985 0 0);

  --border: oklch(0.26 0.025 258.3);
  --input: oklch(0.26 0.025 258.3);
  --ring: oklch(0.627 0.149 233.6);
}