/* Brand palette, sampled from the masjid TV screen. Same values in the Android app.
   Rules: azure = actions; emerald = "now" (current/next prayer) and always takes
   --on-emerald text; gold is decoration (use --gold-700 for gold text on light). */
:root {
    --navy-950: #021A37;
    --navy-900: #01284A;
    --navy-800: #033A64;
    --navy-700: #014A78;
    --navy-600: #0D5687;

    --azure-800: #0556A3;
    --azure-700: #0264BD;
    --azure-600: #0571C8;
    --azure-500: #0781D6;
    --azure-400: #3BA4F0;
    --azure-50: #E4EFFA;

    --emerald-400: #00D284;
    --on-emerald: #011C31;
    --emerald-700: #047A55;
    --emerald-50: #DDF5EA;

    --parchment-50: #FBF8F0;
    --parchment-100: #F7F3E8;
    --parchment-200: #F5F1E5;
    --parchment-300: #E6DDC8;

    --gold-300: #E3C07A;
    --gold-500: #9C7338;
    --gold-700: #7A5A1E;
    --gold-900: #5D3C0B;

    --ink: #0B2440;
    --slate: #2D3B4C;
    --muted: #5B6778;
    --cell: #E8EBF0;
    --danger: #C2362B;
    --warning: #9A5B00;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --shadow: 0 1px 2px rgba(2, 26, 55, .06), 0 6px 20px rgba(2, 26, 55, .07);
    --transition: .2s ease;

    /* Older names still used around the site, mapped to the new palette */
    --primary: var(--azure-600);
    --primary-dark: var(--azure-700);
    --primary-light: var(--azure-50);
    --secondary: var(--gold-500);
    --secondary-dark: var(--gold-700);
    --background: var(--parchment-100);
    --text-primary: var(--slate);
    --text-secondary: var(--muted);
    --text-light: #FFFFFF;
    --border: var(--parchment-300);
}