/* ================================================================
   THEME — Lanka Food Palace UK Ltd
   ================================================================

   This is the SINGLE SOURCE OF TRUTH for every colour, font,
   shadow, radius, and transition on the site.

   ► To change the colour scheme  →  edit the "Brand Colours" block
   ► To swap fonts                →  edit the "Typography" block
   ► To adjust card shapes        →  edit the "Border Radius" block
   ► To change animation speed    →  edit the "Transitions" block

   After editing, save this file and refresh — nothing else needed.

   Current palette: White · Navy Blue (#001F5B) · Warm Gold
   ================================================================ */

:root {

    /* ============================================================
       BRAND COLOURS
       ─────────────────────────────────────────────────────────────
       Primary  =  Navy Blue   — buttons, links, icons, accents
       Gold     =  Warm Gold   — highlights, em text, badges

       Each colour has a matching -rgb variable (R, G, B numbers)
       so you can write:  rgba(var(--c-primary-rgb), 0.12)
       Always update BOTH the hex AND its -rgb pair together.
       ============================================================ */

    /* Primary — Navy Blue */
    --c-primary:      #001F5B;          /* Main brand navy             */
    --c-primary-lt:   #0A3D8F;          /* Lighter — hover / active    */
    --c-primary-dk:   #00112E;          /* Darker  — pressed / shadow  */
    --c-primary-rgb:  0, 31, 91;        /* ← update when hex changes   */

    /* Gold — Warm accent for highlights, stats, and tags */
    --c-gold:         #C9A84C;          /* Warm gold                   */
    --c-gold-lt:      #E8D080;          /* Lighter gold                */
    --c-gold-rgb:     201, 168, 76;     /* ← update when hex changes   */

    /* ============================================================
       PAGE BACKGROUNDS  (light theme)
       ─────────────────────────────────────────────────────────────
       --c-dark    →  primary section backgrounds   (white)
       --c-dark-2  →  alternate section backgrounds (pale blue-grey)
       --c-dark-3  →  inner surfaces / hover states
       --c-card    →  card / panel surface           (white)
       ============================================================ */

    --c-dark:         #FFFFFF;          /* Main section background     */
    --c-dark-2:       #EFF4FB;          /* Alternate section bg        */
    --c-dark-3:       #E0EAF5;          /* Hover / inner surface       */
    --c-card:         #FFFFFF;          /* Card background             */
    --c-dark-rgb:     255, 255, 255;    /* ← update when hex changes   */
    --c-card-rgb:     255, 255, 255;

    /* ============================================================
       TEXT  (dark on white)
       ─────────────────────────────────────────────────────────────
       --c-cream  →  headings / hero title (deep navy)
       --c-text   →  normal body copy      (dark grey-blue)
       --c-muted  →  secondary / hints     (medium grey-blue)
       ============================================================ */

    --c-cream:        #0D1B2E;          /* Headings — deep navy        */
    --c-text:         #2C3E55;          /* Body text                   */
    --c-muted:        #6B7A90;          /* Secondary / hint text       */
    --c-muted-rgb:    107, 122, 144;

    /* ============================================================
       BORDERS & GLOW EFFECTS
       ============================================================ */

    --c-border:       rgba(0,31,91,.14);      /* Default border          */
    --c-border-h:     rgba(0,31,91,.42);      /* Hover / active border   */
    --c-glow:         rgba(0,31,91,.12);      /* Card hover glow         */

    /* ============================================================
       TYPOGRAPHY
       ============================================================ */

    --ff-display: 'Playfair Display', Georgia, serif;
    --ff-body:    'Inter', system-ui, -apple-system, sans-serif;

    /* ============================================================
       BORDER RADIUS
       ============================================================ */

    --r-sm:   8px;
    --r-md:  16px;
    --r-lg:  24px;
    --r-xl:  32px;

    /* ============================================================
       SHADOWS  (stronger on white — needed for depth)
       ============================================================ */

    --sh:     0 2px 16px rgba(0,31,91,.10);
    --sh-lg:  0 8px 40px rgba(0,31,91,.16);

    /* ============================================================
       TRANSITIONS
       ============================================================ */

    --ease:   cubic-bezier(.4, 0, .2, 1);
    --t-fast: .18s cubic-bezier(.4, 0, .2, 1);
    --t-med:  .30s cubic-bezier(.4, 0, .2, 1);
    --t-slow: .42s cubic-bezier(.4, 0, .2, 1);

    /* ============================================================
       LAYOUT
       ============================================================ */

    --nav-h:  72px;
    --max-w: 1200px;
}

/* ── Dark Mode (system preference) ────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        /* Backgrounds */
        --c-dark:         #0D1421;
        --c-dark-2:       #111927;
        --c-dark-3:       #1C2B40;
        --c-card:         #14203A;
        --c-dark-rgb:     13, 20, 33;
        --c-card-rgb:     20, 32, 58;

        /* Text */
        --c-cream:        #E8EDF5;
        --c-text:         #ADBECE;
        --c-muted:        #6B7D95;
        --c-muted-rgb:    107, 125, 149;

        /* Primary — shifted lighter so text/icons are readable on dark bg */
        --c-primary:      #1E6BD6;
        --c-primary-lt:   #4A8FE8;
        --c-primary-dk:   #0A3D8F;
        --c-primary-rgb:  30, 107, 214;

        /* Borders & glow */
        --c-border:       rgba(255, 255, 255, .08);
        --c-border-h:     rgba(255, 255, 255, .20);
        --c-glow:         rgba(0, 0, 0, .50);

        /* Shadows */
        --sh:     0 2px 16px rgba(0, 0, 0, .45);
        --sh-lg:  0 8px 40px rgba(0, 0, 0, .65);
    }
}