/* ========================================================================== */
/*                              THEME: EMBERWOOD GUILD                        */
/* ========================================================================== */
/* This theme is built around warm fantasy tones using Mahogany + Teak + Gold */
/* Perfect for an Adventurer’s Guild aesthetic with premium modern minimalism */
/* ========================================================================== */


/* -------------------------------------------------------------------------- */
/* 1. BRAND COLORS (Core Identity)                                            */
/* -------------------------------------------------------------------------- */
:root {
  /* Brand Palette */
  --color-primary: #8b3f2a;               /* Mahogany (brand identity) */
  --color-primary-rgb: 139, 63, 42;

  --color-primary-dark: #5a2a1d;          /* Deep Teak (structural surfaces) */
  --color-primary-dark-rgb: 90, 42, 29;

  --color-primary-light: #d7b3a4;         /* Light Mahogany tint (soft BGs) */
  --color-primary-light-rgb: 215, 179, 164;

  /* Accent */
  --color-accent: #d4a24c;                /* Gold (logo, highlights, premium) */
  --color-accent-rgb: 212, 162, 76;

  /* Highlight Color (optional semantic) */
  --color-highlight: #6c9e6b;             /* Moss Green – natural guild accent */
  --color-highlight-rgb: 108, 158, 107;

  /* Background */
  --color-bg: #f4e9cf;                    /* Parchment (global background) */
  --color-bg-rgb: 244, 233, 207;

  /* Card / Surface Light */
  --color-surface: #f9f3e4;               /* Slightly brighter parchment */
  --color-surface-rgb: 249, 243, 228;
}


/* -------------------------------------------------------------------------- */
/* 2. NEUTRALS & TEXT COLORS                                                  */
/* -------------------------------------------------------------------------- */
:root {
  --color-text: #2b241d;                  /* Neutral dark (body text) */
  --color-text-light: #6d6256;            /* Subtle text (metadata) */
  --color-border: #c8b9a3;                /* Light neutral border */
  --color-shadow: rgba(0, 0, 0, 0.15);    /* Generic shadow tone */
}


/* -------------------------------------------------------------------------- */
/* 3. COMPONENT-SPECIFIC TOKENS                                               */
/* -------------------------------------------------------------------------- */
:root {
  /* Buttons */
  --btn-radius: 6px;
  --btn-padding: 0.65rem 1.2rem;
  --btn-font-weight: 600;

  /* Button Colors */
  --btn-primary-bg: #6a8f62;              /* Moss green (normal primary BG) */
  --btn-primary-bg-hover: #53734e;        /* Dark moss (hover) */
  --btn-primary-bg-active: #445d40;       /* Deeper moss (pressed) */

  --btn-primary-text: #f4e9cf;            /* Parchment */
  --btn-primary-text-hover: #ffffff;      /* White */
  --btn-primary-text-active: #e8e8e8;

  --btn-secondary-border: var(--color-accent);         /* Gold */
  --btn-secondary-border-hover: var(--color-primary);  /* Mahogany */
  --btn-secondary-border-active: var(--color-primary-dark);

  --btn-secondary-text: var(--color-accent);           /* Gold */
  --btn-secondary-text-hover: var(--color-primary);    /* Mahogany */
  --btn-secondary-text-active: var(--color-primary-dark);

  /* Navigation */
  /*--nav-bg: rgba(var(--color-primary-dark-rgb), 0.65); */ /* Frosted Teak */
  --nav-bg: var(--color-primary-dark);
  /*--nav-bg-blur: blur(12px);*/
  --nav-height: 72px;
  --nav-height-shrink: 56px;
  --nav-text: var(--color-bg);             /* Parchment */
  --nav-text-active: var(--color-accent);  /* Gold */

  /* Card Styles */
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-radius: 14px;
  --card-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);

  /* Layout */
  --layout-max-width: 1200px;
  --layout-padding: 1.5rem;

  /* Shadows */
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.12);
}


/* -------------------------------------------------------------------------- */
/* 4. BORDER RADII                                                            */
/* -------------------------------------------------------------------------- */
:root {
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
}


/* -------------------------------------------------------------------------- */
/* 5. TYPOGRAPHY                                                              */
/* -------------------------------------------------------------------------- */
:root {
  --heading-font: "Cinzel", serif;
  --body-font: "Inter", sans-serif;

  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.6rem;
  --text-xxl: 2.4rem;
}


/* -------------------------------------------------------------------------- */
/* 6. SPACING SCALE                                                           */
/* -------------------------------------------------------------------------- */
:root {
  --space-xxs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-xxl: 3rem;
}