/* ============================================================
   GullyCric — variables.css
   Design tokens for the entire app.
   Change the look of the whole app from this one file.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     BRAND COLORS
  ---------------------------------------------------------- */
  --green-darkest:  #0f2e1a;
  --green-dark:     #1a4d2e;
  --green:          #1e5631;
  --green-mid:      #2d7a47;
  --green-light:    #4caf70;
  --green-pale:     #e8f5ed;
  --green-mist:     #f2faf5;

  --gold:           #e6a817;
  --gold-light:     #fef3c7;
  --gold-dark:      #b8860b;

  --red:            #d63b2f;
  --red-pale:       #fdecea;

  /* ----------------------------------------------------------
     BACKGROUNDS & SURFACES
  ---------------------------------------------------------- */
  --bg:             #f4f8f5;
  --card:           #ffffff;
  --white:          #ffffff;

  --border:         #daeae0;
  --border-mid:     #c4d9cc;

  /* ----------------------------------------------------------
     TEXT
  ---------------------------------------------------------- */
  --text:           #0d1f16;
  --text-mid:       #3d5c48;
  --text-muted:     #7a9985;
  --text-on-green:  #ffffff;

  /* ----------------------------------------------------------
     SHADOWS
  ---------------------------------------------------------- */
  --shadow-xs:  0 1px 4px  rgba(30,86,49,.06);
  --shadow-sm:  0 2px 8px  rgba(30,86,49,.08);
  --shadow-md:  0 4px 20px rgba(30,86,49,.12);
  --shadow-lg:  0 8px 40px rgba(30,86,49,.18);

  /* ----------------------------------------------------------
     TYPOGRAPHY
  ---------------------------------------------------------- */
  --font:       'Outfit', sans-serif;

  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   28px;
  --text-3xl:   36px;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-black:   800;

  /* ----------------------------------------------------------
     SPACING
  ---------------------------------------------------------- */
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-20:  20px;
  --space-24:  24px;
  --space-32:  32px;
  --space-40:  40px;
  --space-48:  48px;

  /* ----------------------------------------------------------
     BORDER RADIUS
  ---------------------------------------------------------- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius:      16px;
  --radius-lg:   24px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     LAYOUT
  ---------------------------------------------------------- */
  --nav-height:    68px;
  --header-height: 56px;

  /* ----------------------------------------------------------
     TRANSITIONS
  ---------------------------------------------------------- */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --duration:    0.2s;
  --duration-md: 0.28s;
}