/* CSS Custom Properties and Variables */

/* Prevent layout shift when scrollbar appears/disappears between pages */
html {
  scrollbar-gutter: stable;
}

:root {
  /* ============================================================
     COLOR SYSTEM — Single source of truth for the entire app.
     Brand: Amber #FFA800.  All semantic colors meet WCAG 2.1 AA
     (≥ 4.5:1 contrast with white text where used as bg+white).
     DO NOT add raw hex colors elsewhere — use these variables.
     ============================================================ */

  /* --- Brand / Primary (Amber) --- */
  --color-primary:          #FFA800; /* brand surface, highlights, badges — use dark text on top */
  --color-primary-dark:     #C27800; /* buttons & links w/ white text — 4.5:1 AA */
  --color-primary-darker:   #9A5F00; /* hover / pressed — 6.5:1 */
  --color-primary-light:    #FFF3E0; /* tinted backgrounds */
  --color-primary-lighter:  #FFF8ED; /* subtle surface tints */
  --color-primary-on-dark:  #4E2800; /* text ON amber surfaces */
  --color-primary-contrast: #ffffff; /* text ON primary-dark buttons */

  /* --- Success (Green) --- */
  --color-success:          #2E7D32; /* 5.0:1 w/ white */
  --color-success-dark:     #1B5E20; /* hover — 7.0:1 */
  --color-success-light:    #E8F5E9; /* bg tint */
  --color-success-border:   #A5D6A7;

  /* --- Danger (Red) --- */
  --color-danger:           #C62828; /* 5.6:1 w/ white */
  --color-danger-dark:      #B71C1C; /* hover — 6.5:1 */
  --color-danger-light:     #FFEBEE; /* bg tint */
  --color-danger-border:    #EF9A9A;

  /* --- Warning (Deep Amber) --- */
  --color-warning:          #F57F17; /* use dark text on this bg */
  --color-warning-dark:     #E65100; /* 4.6:1 w/ white */
  --color-warning-light:    #FFFDE7; /* bg tint */
  --color-warning-border:   #FFE082;
  --color-warning-text:     #4E2800; /* text on warning-light bg */

  /* --- Info (Teal) --- */
  --color-info:             #00838F; /* 4.6:1 w/ white */
  --color-info-dark:        #006064; /* hover — 7.2:1 */
  --color-info-light:       #E0F7FA; /* bg tint */
  --color-info-border:      #80DEEA;

  /* --- Neutrals (Gray scale) --- */
  --color-gray-900: #212121; /* headings, high-emphasis text */
  --color-gray-800: #333333;
  --color-gray-700: #616161; /* body text */
  --color-gray-600: #757575; /* secondary / muted text — 4.6:1 */
  --color-gray-500: #9E9E9E; /* placeholders, disabled */
  --color-gray-400: #BDBDBD; /* subtle icons */
  --color-gray-300: #E0E0E0; /* borders */
  --color-gray-200: #EEEEEE; /* light borders, dividers */
  --color-gray-100: #F5F5F5; /* light backgrounds */
  --color-gray-50:  #FAFAFA; /* surface variant */

  /* --- Surfaces --- */
  --color-surface:          #ffffff;
  --color-surface-variant:  var(--color-gray-100);
  --color-on-surface:       var(--color-gray-900);

  /* --- Status badges (derived from semantic) --- */
  --color-status-pending-bg:    var(--color-warning-light);
  --color-status-pending-text:  var(--color-warning-text);
  --color-status-progress-bg:   var(--color-info-light);
  --color-status-progress-text: var(--color-info-dark);
  --color-status-ready-bg:      var(--color-success-light);
  --color-status-ready-text:    var(--color-success);
  --color-status-delivered-bg:  var(--color-success-light);
  --color-status-delivered-text:var(--color-success-dark);
  --color-status-cancelled-bg:  var(--color-danger-light);
  --color-status-cancelled-text:var(--color-danger-dark);

  /* --- Decorative accents (modifier template buttons) --- */
  --color-accent-pink:   #f093fb;
  --color-accent-coral:  #f5576c;
  --color-accent-rose:   #ff9a9e;
  --color-accent-blush:  #fecfef;
  --color-accent-mint:   #a8edea;
  --color-accent-peach:  #fed6e3;

  /* --- Backward-compatible aliases (keep until migration verified) --- */
  --primary-color:      var(--color-primary-dark);
  --success-color:      var(--color-success);
  --danger-color:       var(--color-danger);
  --warning-color:      var(--color-warning-dark);
  --info-color:         var(--color-info);
  --light-color:        var(--color-gray-100);
  --dark-color:         var(--color-gray-900);

  /* Text Colors (aliases) */
  --text-primary:   var(--color-gray-900);
  --text-secondary: var(--color-gray-700);
  --text-muted:     var(--color-gray-600);
  --text-white:     #ffffff;

  /* Background Colors (aliases) */
  --bg-white:   var(--color-surface);
  --bg-light:   var(--color-gray-100);
  --bg-lighter: var(--color-primary-light);
  --bg-dark:    var(--color-gray-900);

  /* Border Colors (aliases) */
  --border-color:       var(--color-gray-300);
  --border-color-light: var(--color-gray-200);
  --border-color-focus: var(--color-primary);

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-xxl: 24px;

  /* Border Radius */
  --border-radius-sm: 4px;
  --border-radius: 8px;
  --border-radius-lg: 12px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* Typography */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.85rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.1rem;
  --font-size-xl: 1.25rem;
  --font-size-xxl: 1.5rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Layout */
  --container-max-width: 1200px;
  --grid-gap: var(--spacing-lg);

  /* --- Public / SEO Pages --- */
  /* Hero gradient — matches main LP amber brand */
  --gradient-hero: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  /* Section-level spacing for public pages */
  --spacing-section: 48px;
  --spacing-section-lg: 64px;
  --spacing-hero-top: 100px;
  /* Hero typography (mobile-first, scale up via media queries) */
  --font-size-hero: 2rem;
  --font-size-hero-md: 2.5rem;
  --font-size-hero-lg: 3rem;
  --font-size-section-title: 1.5rem;
}