/* ============================================================
   Market54 PWA - Theme Configuration
   ============================================================
   This is the ONLY file that changes between deployments.
   Swap this file to rebrand the entire app.
   ============================================================ */

:root {
  /* --- Brand --- */
  --app-name: "Market54";

  /* --- Colours --- */
  --color-primary:        #007A8C;   /* Teal - main brand colour */
  --color-primary-dark:   #005F6B;   /* Darker teal - header, active states */
  --color-primary-light:  #00A0B8;   /* Lighter teal - hover, highlights */
  --color-accent:         #8B7D2A;   /* Olive/gold - buttons, CTAs */
  --color-accent-hover:   #6E6320;   /* Darker gold - button hover */

  --color-bg:             #F4F6F7;   /* Page background */
  --color-surface:        #FFFFFF;   /* Cards, panels */
  --color-border:         #D0D7DA;   /* Input borders, dividers */

  --color-text-primary:   #1A2B2E;   /* Main text */
  --color-text-secondary: #5A7075;   /* Subtitles, hints */
  --color-text-inverse:   #FFFFFF;   /* Text on dark backgrounds */
  --color-text-link:      #007A8C;   /* Links */

  --color-error:          #C0392B;   /* Error messages */
  --color-success:        #1E8449;   /* Success messages */
  --color-warning:        #D68910;   /* Warning messages */

  /* --- Typography --- */
  --font-display:   'Raleway', sans-serif;      /* Headers, logo text */
  --font-body:      'Source Sans 3', sans-serif; /* Body, inputs, labels */

  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg:   1.125rem;  /* 18px */
  --font-size-xl:   1.25rem;   /* 20px */
  --font-size-2xl:  1.5rem;    /* 24px */

  /* --- Spacing --- */
  --space-xs:  0.25rem;   /* 4px */
  --space-sm:  0.5rem;    /* 8px */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2rem;      /* 32px */
  --space-2xl: 3rem;      /* 48px */

  /* --- Layout --- */
  --header-height:     56px;
  --bottom-nav-height: 64px;
  --border-radius-sm:  6px;
  --border-radius-md:  10px;
  --border-radius-lg:  16px;

  /* --- Shadows --- */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.10);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.12);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.15);

  /* --- Logo --- */
  --logo-path: "/theme/logo.png";
}