/**
 * --------------------------------------------------------------------
 * Author   : Manoj Mathangadeera / Aivotandra
 * Website  : https://aivotandra.com
 * Company  : Adeon Bridge Technologies LLC
 * Website  : https://adeon.ae
 * Contact  : manoj@aivotandra.com
 * Version  : 3.0
 * Updated  : May 2026
 * Project  : 7Dragon Bar & Lounge
 * File Name: styles.css
 * --------------------------------------------------------------------
 */


/* === BLOCK 1 — FONT IMPORTS === */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');


/* === BLOCK 2 — ICON LIBRARY === */

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');


:root {

/* ====================================================================
 * BLOCK 3 — BRAND COLORS
 * ====================================================================
 * CHANGE THESE TO MATCH YOUR BRAND.
 * All other color variables below reference these values.
 * You only need to change colors here — nowhere else.
 *
 * HOW TO USE
 * Replace the hex code after the colon with your brand color.
 * Example: --color-1: #000000;
 * ====================================================================
 */

  /* --- BACKGROUND COLORS --- */
  --color-1:   #0a0705;        /* Darkest background — main page background */
  --color-2:   #120d1a;        /* Secondary background — alternate sections */
  --color-3:   #1a1020;        /* Card background */

  /* --- BRAND COLORS --- */
  --color-4:   #c9a227;        /* Main brand color — gold */
  --color-5:   #e8751a;        /* Secondary brand color — amber */
  --color-6:   #7b2d8b;        /* Accent color — purple */
  --color-7:   #e8c84a;        /* Hover color — lighter gold */

  /* --- TEXT COLORS --- */
  --color-8:   #f0ead6;        /* Primary text — warm white */
  --color-9:   #faf6ee;        /* Text on dark backgrounds — pure white */
  --color-10:  #a08c5b;        /* Secondary text — muted gold */
  --color-11:  #6b6075;        /* Muted text — faded purple */

  /* --- STATUS COLORS --- */
  --color-12:  #2d6a4f;        /* Success — green */

  /* --- FONT NAMES --- */
  /* Change font names here if you want different fonts.
   * Make sure to also update the Google Fonts import in BLOCK 1 above. */
  --font-1:    'Cinzel', serif;                     /* Heading font */
  --font-2:    'Plus Jakarta Sans', sans-serif;     /* Body font */
  --font-3:    'Cormorant Garamond', serif;         /* Accent font */

/* ====================================================================
 * FIND AND REPLACE NOTICE
 * ====================================================================
 * Some values below use rgba — these cannot reference the color
 * variables above directly. If you changed any of the following
 * colors you must also find and replace the rgba values below.
 *
 * If you changed --color-1 ( #080808 )
 * Find    : rgba(8, 8, 8
 * Replace : rgba(YOUR NEW COLOR IN RGB FORMAT
 *
 * If you changed --color-4 ( #c0392b )
 * Find    : rgba(192, 57, 43
 * Replace : rgba(YOUR NEW COLOR IN RGB FORMAT
 * ====================================================================
 */


/* ====================================================================
 * BLOCK 4 — ALL VARIABLES
 * ====================================================================
 * DO NOT CHANGE BELOW THIS LINE.
 * These variables reference the brand colors above.
 * The template uses these names to build the website.
 * ====================================================================
 */

  /* --- BACKGROUNDS --- */
  --bg-primary:        var(--color-1);
  --bg-secondary:      var(--color-2);
  --bg-header:         rgba(10, 7, 5, 0.95);
  --bg-footer:         var(--color-2);
  --bg-sticky-bar:     var(--color-1);
  --bg-overlay:        rgba(0, 0, 0, 0.6);
  --bg-card:           var(--color-3);

  /* --- BRAND --- */
  --brand-primary:     var(--color-4);
  --brand-secondary:   var(--color-5);
  --brand-accent:      var(--color-6);

  /* --- TEXT --- */
  --text-primary:      var(--color-8);
  --text-secondary:    var(--color-10);
  --text-muted:        var(--color-11);
  --text-on-dark:      var(--color-9);
  --text-heading:      var(--color-8);
  --text-nav:          var(--color-8);
  --text-nav-active:   var(--color-4);

  /* --- UI ELEMENTS --- */
  --btn-bg:            var(--color-4);
  --btn-text:          var(--color-1);
  --btn-hover:         var(--color-7);
  --border-color:      rgba(201, 162, 39, 0.25);
  --card-bg:           var(--color-3);
  --shadow-color:      rgba(201, 162, 39, 0.15);

  /* --- STATUS --- */
  --color-success:     var(--color-12);
  --color-warning:     var(--color-5);
  --color-promo:       var(--color-5);

  /* --- TYPOGRAPHY --- */
  --font-heading:           var(--font-1);
  --font-body:              var(--font-2);
  --font-accent:            var(--font-3);
  --text-xs:                0.75rem;
  --text-sm:                0.875rem;
  --text-base:              1rem;
  --text-md:                1.125rem;
  --text-lg:                1.25rem;
  --text-xl:                1.5rem;
  --text-2xl:               2rem;
  --text-hero:              3.5rem;
  --font-weight-normal:     400;
  --font-weight-medium:     500;
  --font-weight-bold:       700;
  --line-height-tight:      1.2;
  --line-height-normal:     1.5;
  --line-height-loose:      1.8;

  /* --- SPACING --- */
  --space-xs:          0.25rem;
  --space-sm:          0.5rem;
  --space-md:          1rem;
  --space-lg:          1.5rem;
  --space-xl:          3rem;
  --space-2xl:         5rem;
  --container-width:   1200px;

  /* --- BORDER RADIUS --- */
  --radius-sm:         4px;
  --radius-md:         8px;
  --radius-lg:         16px;
  --radius-full:       9999px;

  /* --- TRANSITIONS & SHADOWS --- */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow:   0.6s ease;
  --shadow-sm:         0 2px 8px rgba(201, 162, 39, 0.1);
  --shadow-md:         0 4px 20px rgba(201, 162, 39, 0.15);
  --shadow-lg:         0 8px 40px rgba(201, 162, 39, 0.2);

}