/* ============================================
   AllInOneQR — Figma-Ready Design Tokens
   Brand Identity System v1.0
   Factory to Farmer · GS1 Digital Link
   allinoneqr.org
   ============================================ */

:root {

  /* ─────────────────────────────────────
     COLOUR TOKENS — Primary Palette
  ───────────────────────────────────── */

  /* Royal Blue — Primary brand colour */
  --color-blue-100: rgba(25, 3, 174, 0.08);
  --color-blue-200: rgba(25, 3, 174, 0.15);
  --color-blue-300: rgba(25, 3, 174, 0.30);
  --color-blue-400: rgba(25, 3, 174, 0.50);
  --color-blue-500: rgba(25, 3, 174, 0.70);
  --color-blue-600: #3924B8;
  --color-blue-700: #1903AE;   /* PRIMARY */
  --color-blue-800: #1400A0;
  --color-blue-900: #0D0080;   /* Navy Deep */

  /* Vermillion — Action / QR colour */
  --color-coral-100: rgba(221, 83, 83, 0.08);
  --color-coral-200: rgba(221, 83, 83, 0.15);
  --color-coral-300: rgba(221, 83, 83, 0.30);
  --color-coral-400: rgba(221, 83, 83, 0.50);
  --color-coral-500: rgba(221, 83, 83, 0.70);
  --color-coral-600: #E06060;
  --color-coral-700: #DD5353;  /* PRIMARY */
  --color-coral-800: #C94040;
  --color-coral-900: #622B4F;  /* Deep Plum */

  /* Chalk White — Backgrounds & text */
  --color-chalk-100: #FFFFFF;
  --color-chalk-200: #F5F4FA;  /* PRIMARY */
  --color-chalk-300: #EEEDF8;
  --color-chalk-400: #E0DFF5;
  --color-chalk-500: #C0BCEE;

  /* Violet — Secondary accent */
  --color-violet-100: rgba(102, 87, 197, 0.10);
  --color-violet-200: rgba(102, 87, 197, 0.20);
  --color-violet-500: #6657C5;  /* PRIMARY */
  --color-violet-700: #4A3BAA;

  /* ─────────────────────────────────────
     SEMANTIC COLOUR TOKENS
  ───────────────────────────────────── */

  /* Backgrounds */
  --bg-primary:        #F5F4FA;
  --bg-surface:        #FFFFFF;
  --bg-inverse:        #1903AE;
  --bg-inverse-deep:   #0D0080;
  --bg-action:         #DD5353;
  --bg-subtle:         rgba(25, 3, 174, 0.06);

  /* Text */
  --text-primary:      #1903AE;
  --text-secondary:    #6657C5;
  --text-muted:        #888888;
  --text-inverse:      #F5F4FA;
  --text-action:       #DD5353;
  --text-on-action:    #FFFFFF;

  /* Borders */
  --border-default:    #E0DFF5;
  --border-strong:     #C0BCEE;
  --border-brand:      #1903AE;
  --border-action:     #DD5353;

  /* Status */
  --status-verified:   #1B6B3A;
  --status-verified-bg: rgba(27, 107, 58, 0.10);
  --status-alert:      #DD5353;
  --status-alert-bg:   rgba(221, 83, 83, 0.10);
  --status-pending:    #6657C5;
  --status-pending-bg: rgba(102, 87, 197, 0.10);

  /* ─────────────────────────────────────
     TYPOGRAPHY TOKENS
  ───────────────────────────────────── */

  /* Font Families */
  --font-display: 'Garet', 'Nunito', sans-serif;       /* Logo, Hero headlines */
  --font-body:    'Space Grotesk', sans-serif;          /* UI, body text */
  --font-mono:    'JetBrains Mono', 'Courier New', monospace; /* GS1 codes, serials */

  /* Font Sizes */
  --text-xs:    10px;
  --text-sm:    12px;
  --text-base:  14px;
  --text-md:    16px;
  --text-lg:    18px;
  --text-xl:    22px;
  --text-2xl:   28px;
  --text-3xl:   36px;
  --text-4xl:   48px;
  --text-hero:  64px;

  /* Font Weights */
  --weight-light:      300;
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-bold:       700;
  --weight-extrabold:  800; /* Garet Heavy */

  /* Line Heights */
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* Letter Spacing */
  --tracking-tight:  -0.5px;
  --tracking-normal: 0px;
  --tracking-wide:   0.5px;
  --tracking-wider:  1px;
  --tracking-widest: 2px;  /* UPPERCASE LABELS */

  /* ─────────────────────────────────────
     SPACING TOKENS (4pt grid)
  ───────────────────────────────────── */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ─────────────────────────────────────
     BORDER RADIUS TOKENS
  ───────────────────────────────────── */

  --radius-xs:   2px;
  --radius-sm:   4px;   /* Inputs, small buttons */
  --radius-md:   8px;   /* Cards, modals */
  --radius-lg:   12px;  /* Large cards */
  --radius-xl:   16px;  /* Hero sections */
  --radius-2xl:  24px;  /* Full-bleed panels */
  --radius-pill: 9999px; /* Badges, tags */

  /* ─────────────────────────────────────
     SHADOW TOKENS
  ───────────────────────────────────── */

  --shadow-xs:  0 1px 2px rgba(25, 3, 174, 0.06);
  --shadow-sm:  0 2px 6px rgba(25, 3, 174, 0.08);
  --shadow-md:  0 4px 16px rgba(25, 3, 174, 0.12);
  --shadow-lg:  0 8px 32px rgba(25, 3, 174, 0.16);
  --shadow-xl:  0 16px 48px rgba(25, 3, 174, 0.22);

  /* ─────────────────────────────────────
     COMPONENT TOKENS — Buttons
  ───────────────────────────────────── */

  --btn-height-sm:    32px;
  --btn-height-md:    40px;
  --btn-height-lg:    48px;
  --btn-padding-x-sm: 12px;
  --btn-padding-x-md: 20px;
  --btn-padding-x-lg: 28px;
  --btn-radius:       var(--radius-sm);
  --btn-font-size:    var(--text-base);
  --btn-font-weight:  var(--weight-medium);

  /* Primary Button */
  --btn-primary-bg:      var(--color-blue-700);
  --btn-primary-text:    var(--color-chalk-200);
  --btn-primary-hover:   var(--color-blue-800);

  /* Action Button */
  --btn-action-bg:       var(--color-coral-700);
  --btn-action-text:     #FFFFFF;
  --btn-action-hover:    var(--color-coral-800);

  /* Outline Button */
  --btn-outline-bg:      transparent;
  --btn-outline-text:    var(--color-blue-700);
  --btn-outline-border:  var(--color-blue-700);

  /* ─────────────────────────────────────
     COMPONENT TOKENS — Badges
  ───────────────────────────────────── */

  --badge-verified-bg:   var(--status-verified-bg);
  --badge-verified-text: var(--status-verified);
  --badge-alert-bg:      var(--color-coral-700);
  --badge-alert-text:    #FFFFFF;
  --badge-neutral-bg:    var(--color-chalk-300);
  --badge-neutral-text:  #555555;
  --badge-radius:        var(--radius-pill);
  --badge-padding:       4px 12px;
  --badge-font-size:     var(--text-xs);
  --badge-font-weight:   var(--weight-medium);
  --badge-tracking:      var(--tracking-wide);

  /* ─────────────────────────────────────
     COMPONENT TOKENS — Cards
  ───────────────────────────────────── */

  --card-bg:             var(--bg-surface);
  --card-border:         var(--border-default);
  --card-radius:         var(--radius-md);
  --card-padding:        var(--space-6);
  --card-shadow:         var(--shadow-sm);

  /* ─────────────────────────────────────
     COMPONENT TOKENS — Navigation
  ───────────────────────────────────── */

  --nav-bg:              var(--color-blue-700);
  --nav-text:            var(--color-chalk-200);
  --nav-text-muted:      var(--color-violet-200);
  --nav-height:          64px;
  --nav-padding-x:       var(--space-10);

  /* ─────────────────────────────────────
     ANIMATION TOKENS
  ───────────────────────────────────── */

  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --easing-default:   cubic-bezier(0.4, 0, 0.2, 1);
  --easing-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --easing-out:       cubic-bezier(0, 0, 0.2, 1);

  /* ─────────────────────────────────────
     Z-INDEX TOKENS
  ───────────────────────────────────── */

  --z-base:    0;
  --z-raised:  10;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;

}

/* ─────────────────────────────────────
   UTILITY CLASSES
───────────────────────────────────── */

/* Brand Colours */
.text-brand        { color: var(--color-blue-700); }
.text-action       { color: var(--color-coral-700); }
.text-muted        { color: var(--text-muted); }
.text-inverse      { color: var(--text-inverse); }
.bg-brand          { background-color: var(--color-blue-700); }
.bg-action         { background-color: var(--color-coral-700); }
.bg-surface        { background-color: var(--bg-surface); }
.bg-subtle         { background-color: var(--bg-subtle); }

/* Typography */
.font-display      { font-family: var(--font-display); }
.font-body         { font-family: var(--font-body); }
.text-hero         { font-size: var(--text-hero); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-tight); }
.text-heading      { font-size: var(--text-3xl); font-weight: var(--weight-bold); }
.text-subheading   { font-size: var(--text-xl); font-weight: var(--weight-medium); }
.text-label        { font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-widest); text-transform: uppercase; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-height-md);
  padding: 0 var(--btn-padding-x-md);
  border-radius: var(--btn-radius);
  font-family: var(--font-body);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  border: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--easing-default);
}
.btn-primary  { background: var(--btn-primary-bg);  color: var(--btn-primary-text); }
.btn-action   { background: var(--btn-action-bg);   color: var(--btn-action-text); }
.btn-outline  { background: var(--btn-outline-bg);  color: var(--btn-outline-text); border: 1.5px solid var(--btn-outline-border); }
.btn-primary:hover { background: var(--btn-primary-hover); }
.btn-action:hover  { background: var(--btn-action-hover); }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--badge-padding);
  border-radius: var(--badge-radius);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  letter-spacing: var(--badge-tracking);
}
.badge-verified { background: var(--badge-verified-bg); color: var(--badge-verified-text); }
.badge-alert    { background: var(--badge-alert-bg);    color: var(--badge-alert-text); }
.badge-neutral  { background: var(--badge-neutral-bg);  color: var(--badge-neutral-text); }

/* Cards */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
}