/* ═══════════════════════════════════════════════════════════════
   FLOVARA DESIGN SYSTEM
   ─────────────────────────────────────────────────────────────
   This file documents every design token used across the site.
   Any AI or developer can reference these variables to make
   edits that stay consistent with the Flovara brand.

   Usage:  color: rgb(var(--color_15));
           font: var(--wix-font-Body-M);

   Generated from Wix Thunderbolt export — do not edit blindly.
   ═══════════════════════════════════════════════════════════════ */

/* ── COLOR PALETTE ───────────────────────────────────────
   Colors are stored as R,G,B triplets for use with rgb().
   Example: color: rgb(var(--color_15)); → color: rgb(1,1,1);
   ───────────────────────────────────────────────────────── */

:root {
  /* ══ Primary Brand Colors ══ */
  --color_0:  255,255,255;   /* White */
  --color_1:  255,255,255;   /* White */
  --color_2:  0,0,0;         /* Black */
  --color_3:  237,28,36;     /* Red */
  --color_4:  0,136,203;     /* Blue */
  --color_5:  255,203,5;     /* Yellow/Gold */
  --color_6:  114,114,114;   /* Mid Gray */
  --color_7:  176,176,176;   /* Light Gray */
  --color_8:  255,255,255;   /* White */
  --color_9:  114,114,114;   /* Mid Gray */
  --color_10: 176,176,176;   /* Light Gray */

  /* ══ Background & Surface ══ */
  --color_11: 255,254,243;   /* Off-white (main bg) */
  --color_12: 215,215,215;   /* Light border */
  --color_13: 176,176,176;   /* Muted */
  --color_14: 89,88,85;      /* Dark gray text */
  --color_15: 1,1,1;         /* Near-black text */

  /* ══ Accent: Blue ══ */
  --color_16: 229,240,254;   /* Lightest blue */
  --color_17: 200,224,254;   /* Light blue */
  --color_18: 27,92,221;     /* Primary blue (CTAs, links) */
  --color_19: 0,58,150;      /* Dark blue */
  --color_20: 0,29,75;       /* Darkest blue */

  /* ══ Accent: Orange ══ */
  --color_21: 249,197,180;   /* Lightest orange */
  --color_22: 243,167,143;   /* Light orange */
  --color_23: 237,88,41;     /* Primary orange */
  --color_24: 158,59,27;     /* Dark orange */
  --color_25: 79,29,14;      /* Darkest orange */

  /* ══ Accent: Purple ══ */
  --color_26: 210,172,247;   /* Lightest purple */
  --color_27: 186,131,240;   /* Light purple */
  --color_28: 128,21,232;    /* Primary purple */
  --color_29: 85,14,155;     /* Dark purple */
  --color_30: 43,7,77;       /* Darkest purple */

  /* ══ Accent: Green ══ */
  --color_31: 177,211,187;   /* Lightest green */
  --color_32: 127,168,139;   /* Light green */
  --color_33: 64,124,81;     /* Primary green */
  --color_34: 43,83,54;      /* Dark green */
  --color_35: 21,41,27;      /* Darkest green */

  /* ══ Semantic Aliases ══ */
  --color_36: 255,254,243;   /* = color_11 (page bg) */
  --color_37: 1,1,1;         /* = color_15 (text) */
  --color_38: 215,215,215;   /* = color_12 */
  --color_39: 176,176,176;   /* = color_13 */
  --color_40: 89,88,85;      /* = color_14 */
  --color_41: 27,92,221;     /* = color_18 (link color) */
  --color_42: 255,245,195;   /* Light yellow */
  --color_43: 255,235,227;   /* Light peach */
  --color_44: 255,255,255;   /* White */
  --color_45: 1,1,1;         /* = color_15 */
  --color_46: 1,1,1;         /* = color_15 */
  --color_47: 1,1,1;         /* = color_15 */
  --color_48: 1,1,1;         /* = color_15 */
  --color_49: 1,1,1;         /* = color_15 */
  --color_50: 255,254,243;   /* = color_11 */
  --color_51: 255,254,243;   /* = color_11 */
  --color_52: 1,1,1;         /* = color_15 */
  --color_53: 1,1,1;         /* = color_15 */
  --color_54: 176,176,176;   /* = color_13 */
  --color_55: 176,176,176;   /* = color_13 */
  --color_56: 255,254,243;   /* = color_11 */
  --color_57: 27,92,221;     /* = color_18 */
  --color_58: 255,254,243;   /* = color_11 */
  --color_59: 255,254,243;   /* = color_11 */
  --color_60: 255,254,243;   /* = color_11 */
  --color_61: 27,92,221;     /* = color_18 */
  --color_62: 27,92,221;     /* = color_18 */
  --color_63: 255,254,243;   /* = color_11 */
  --color_64: 176,176,176;   /* = color_13 */
  --color_65: 176,176,176;   /* = color_13 */

  /* ── QUICK REFERENCE: Common Color Uses ── */
  /*   Page background:   rgb(var(--color_11)) → #FFFEF3 (off-white) */
  /*   Body text:         rgb(var(--color_15)) → #010101 (near-black) */
  /*   Links/CTAs:        rgb(var(--color_18)) → #1B5CDD (blue) */
  /*   Muted text:        rgb(var(--color_14)) → #595855 (dark gray) */
  /*   Borders:           rgb(var(--color_12)) → #D7D7D7 (light gray) */
  /*   Orange accent:     rgb(var(--color_23)) → #ED5829 */
  /*   Purple accent:     rgb(var(--color_28)) → #8015E8 */
  /*   Green accent:      rgb(var(--color_33)) → #407C51 */


  /* ── TYPOGRAPHY ────────────────────────────────────────
     Font stacks use Wix CDN fonts. For local dev, fallbacks
     are provided. The CDN fonts load from:
     static.parastorage.com / static.wixstatic.com
     ───────────────────────────────────────────────────── */

  /* Display / Titles — Serif */
  --wix-font-Title-family:             "times new roman", times, serif;
  --wix-font-Page-title-family:        "times new roman", times, serif;
  --wix-font-Heading-XL-family:        "times new roman", times, serif;
  --wix-font-Heading-L-family:         "times new roman", times, serif;
  --wix-font-Heading-M-family:         "times new roman", times, serif;

  /* Headings — Sans-serif */
  --wix-font-Heading-S-family:         arial, "ｍｓ ｐゴシック", "ms pgothic", 돋움, dotum, helvetica, sans-serif;

  /* Body — Sans-serif */
  --wix-font-Body-L-family:            arial, "ｍｓ ｐゴシック", "ms pgothic", 돋움, dotum, helvetica, sans-serif;
  --wix-font-Body-M-family:            arial, "ｍｓ ｐゴシック", "ms pgothic", 돋움, dotum, helvetica, sans-serif;
  --wix-font-Body-S-family:            arial, "ｍｓ ｐゴシック", "ms pgothic", 돋움, dotum, helvetica, sans-serif;

  /* Small / UI — Din Next */
  --wix-font-Body-XS-family:           din-next-w01-light, sans-serif;
  --wix-font-Menu-family:              din-next-w01-light, sans-serif;

  /* Weights (Helvetica Neue) */
  --wix-font-LIGHT-family:             HelveticaNeueW01-45Ligh, "Helvetica Neue", helvetica, sans-serif;
  --wix-font-MEDIUM-family:            HelveticaNeueW01-55Roma, "Helvetica Neue", helvetica, sans-serif;
  --wix-font-STRONG-family:            HelveticaNeueW01-65Medi, "Helvetica Neue", helvetica, sans-serif;

  /* ── QUICK REFERENCE: Font Usage ── */
  /*   Page titles:     var(--wix-font-Page-title) — Times New Roman */
  /*   Section headers: var(--wix-font-Heading-M) — Times New Roman */
  /*   Body text:       var(--wix-font-Body-M) — Arial */
  /*   Nav menu:        var(--wix-font-Menu) — Din Next Light */
  /*   Small labels:    var(--wix-font-Body-XS) — Din Next Light */
}


/* ── SEMANTIC DESIGN TOKENS ─────────────────────────────
   Use these for new content to stay on-brand without
   memorizing color numbers.
   ─────────────────────────────────────────────────────── */

:root {
  /* Backgrounds */
  --flovara-bg-primary:     rgb(var(--color_11));   /* #FFFEF3 off-white */
  --flovara-bg-white:       rgb(var(--color_0));    /* #FFFFFF */
  --flovara-bg-dark:        rgb(var(--color_15));   /* #010101 */

  /* Text */
  --flovara-text-primary:   rgb(var(--color_15));   /* #010101 near-black */
  --flovara-text-muted:     rgb(var(--color_14));   /* #595855 */
  --flovara-text-light:     rgb(var(--color_13));   /* #B0B0B0 */
  --flovara-text-white:     rgb(var(--color_0));    /* #FFFFFF */

  /* Interactive */
  --flovara-link:           rgb(var(--color_18));   /* #1B5CDD blue */
  --flovara-link-hover:     rgb(var(--color_19));   /* #003A96 dark blue */
  --flovara-cta-bg:         rgb(var(--color_18));   /* #1B5CDD blue */
  --flovara-cta-text:       rgb(var(--color_0));    /* #FFFFFF */

  /* Accents */
  --flovara-accent-orange:  rgb(var(--color_23));   /* #ED5829 */
  --flovara-accent-purple:  rgb(var(--color_28));   /* #8015E8 */
  --flovara-accent-green:   rgb(var(--color_33));   /* #407C51 */
  --flovara-accent-gold:    rgb(var(--color_5));    /* #FFCB05 */

  /* Borders & Dividers */
  --flovara-border:         rgb(var(--color_12));   /* #D7D7D7 */
  --flovara-border-light:   rgb(var(--color_13));   /* #B0B0B0 */

  /* Typography */
  --flovara-font-display:   var(--wix-font-Page-title-family);
  --flovara-font-heading:   var(--wix-font-Heading-M-family);
  --flovara-font-body:      var(--wix-font-Body-M-family);
  --flovara-font-ui:        var(--wix-font-Menu-family);
}


/* ── UTILITY CLASSES ────────────────────────────────────
   Drop these on any element to apply Flovara styling.
   ─────────────────────────────────────────────────────── */

.flovara-bg           { background: var(--flovara-bg-primary) !important; }
.flovara-bg-white     { background: var(--flovara-bg-white) !important; }
.flovara-bg-dark      { background: var(--flovara-bg-dark) !important; }

.flovara-text         { color: var(--flovara-text-primary) !important; }
.flovara-text-muted   { color: var(--flovara-text-muted) !important; }
.flovara-text-white   { color: var(--flovara-text-white) !important; }

.flovara-link         { color: var(--flovara-link) !important; }
.flovara-link:hover   { color: var(--flovara-link-hover) !important; }

.flovara-btn          {
  background: var(--flovara-cta-bg) !important;
  color: var(--flovara-cta-text) !important;
  font-family: var(--flovara-font-ui) !important;
  padding: 12px 32px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.flovara-font-display { font-family: var(--flovara-font-display) !important; }
.flovara-font-heading { font-family: var(--flovara-font-heading) !important; }
.flovara-font-body    { font-family: var(--flovara-font-body) !important; }
.flovara-font-ui      { font-family: var(--flovara-font-ui) !important; }