/* ==========================================================================
   RHINOAGENTS MASTER THEME DESIGN SYSTEM (Single Source of Truth)
   File: theme.css
   
   HOW TO USE:
   Whenever you want to change the design or color palette of the ENTIRE
   website, simply change the variables below in this ONE file.
   Everything (pages, cards, text, headers, footers, buttons) will update
   automatically across the entire website!
   ========================================================================== */

:root {
  /* ==========================================================================
     ACTIVE PALETTE: Clean Monochrome (White, Light Grey, Dark Charcoal/Black)
     ========================================================================== */

  /* ── 1. Page & Section Backgrounds ── */
  --bg-page: #ffffff;                 /* Main background of all pages */
  --bg-surface: #f8f8fa;              /* Soft grey section / alternating bands */
  --bg-surface-alt: #f1f1f5;          /* Secondary grey section background */
  --bg-card: #ffffff;                 /* Content card & container background */
  --bg-card-hover: #fafafa;           /* Card hover background */

  /* ── 2. Typography & Text Colors ── */
  --text-primary: #111111;            /* Headings, titles, main body text */
  --text-secondary: #444444;          /* Subtitles, secondary descriptions */
  --text-muted: #777777;              /* Labels, metadata, timestamps, hints */
  --text-inverse: #ffffff;            /* Text inside dark buttons & badges */

  /* ── 3. Brand & Accent Colors ── */
  --brand-primary: #111111;           /* Main brand color (used for primary actions) */
  --brand-primary-hover: #333333;     /* Primary button / link hover */
  --brand-accent: #555555;            /* Secondary accent color */
  --brand-accent-light: #f0f0f2;      /* Subtle pill / badge background */

  /* ── 4. Borders & Dividers ── */
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-default: rgba(0, 0, 0, 0.10);
  --border-strong: rgba(0, 0, 0, 0.18);
  --border-radius: 8px;

  /* ── 5. Header Component ── */
  --header-bg: rgba(255, 255, 255, 0.97);
  --header-border: rgba(0, 0, 0, 0.08);
  --header-text: #111111;
  --header-mega-bg: #ffffff;

  /* ── 6. Footer Component ── */
  --footer-bg: #f5f5f5;
  --footer-border: rgba(0, 0, 0, 0.08);
  --footer-heading: rgba(17, 17, 17, 0.6);
  --footer-link: rgba(17, 17, 17, 0.7);
  --footer-link-hover: #000000;
  --footer-badge-filter: grayscale(100%);  /* 100% for monochrome, 0% for color */

  /* ── 7. Primary & Secondary Buttons ── */
  --btn-primary-bg: #111111;
  --btn-primary-text: #ffffff;
  --btn-primary-hover-bg: #2d2d2d;
  --btn-secondary-bg: transparent;
  --btn-secondary-border: #111111;
  --btn-secondary-text: #111111;

  /* ==========================================================================
     BACKWARD-COMPATIBILITY ALIASES
     (Maps legacy variable names used in older CSS files to the master tokens)
     ========================================================================== */
  --primary-bg: var(--bg-page) !important;
  --secondary-bg: var(--bg-surface) !important;
  --tertiary-bg: var(--bg-surface-alt) !important;

  --bg: var(--bg-page) !important;
  --bg2: var(--bg-surface) !important;
  --bg3: var(--bg-surface-alt) !important;

  --card: var(--bg-card) !important;
  --card-bg: var(--bg-card) !important;
  --card-hover: var(--bg-card-hover) !important;

  --text: var(--text-primary) !important;
  --muted: var(--text-muted) !important;
  --text-dim: var(--text-muted) !important;
  --text-mid: var(--text-secondary) !important;

  --border: var(--border-default) !important;
  --border-color: var(--border-default) !important;
  --border2: var(--border-strong) !important;

  --brand: var(--brand-primary) !important;
  --brand2: var(--brand-primary-hover) !important;
  --accent: var(--brand-primary) !important;
  --accent-hover: var(--brand-primary-hover) !important;
  --accent-muted: var(--brand-accent-light) !important;

  --purple: var(--brand-primary) !important;
  --purple-light: var(--brand-accent) !important;
  --purple-dark: var(--brand-primary) !important;

  --blue: var(--brand-primary) !important;
  --blue-light: var(--brand-accent) !important;
  --blue-dark: var(--brand-primary) !important;

  --teal: #10a37f !important;
  --teal-light: #14ba8f !important;
  --teal-dark: #0e8c6d !important;
  --chatgpt-green: #10a37f !important;
  --chatgpt-green-hover: #0e8c6d !important;

  --amber: var(--brand-accent) !important;
  --rose: var(--brand-accent) !important;
  --mint: #10a37f !important;
  --coral: var(--brand-accent) !important;
  --orange: var(--brand-primary) !important;
  --green: var(--brand-primary) !important;
}

/* ==========================================================================
   GLOBAL BASE DEFAULTS
   ========================================================================== */
body, html {
  background-color: var(--bg-page) !important;
  color: var(--text-primary) !important;
}

/* Global button utility alignments */
.btn-fill, .button-primary {
  background-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  border-color: var(--btn-primary-bg) !important;
}

.btn-fill:hover, .button-primary:hover {
  background-color: var(--btn-primary-hover-bg) !important;
  border-color: var(--btn-primary-hover-bg) !important;
}

.btn-outline, .button-secondary {
  background-color: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-text) !important;
  border-color: var(--btn-secondary-border) !important;
}

/* ==========================================================================
   PRESET THEMES (Copy any preset into :root above to switch styles instantly)
   ==========================================================================

   PRESET 1: DARK MODE (Modern Obsidian & Charcoal)
   -------------------------------------------------
   --bg-page: #0c0c0e;
   --bg-surface: #141418;
   --bg-surface-alt: #1c1c22;
   --bg-card: #18181f;
   --bg-card-hover: #22222a;
   --text-primary: #f4f4f7;
   --text-secondary: #b5b5c3;
   --text-muted: #727284;
   --text-inverse: #0c0c0e;
   --brand-primary: #ffffff;
   --brand-primary-hover: #e0e0e8;
   --brand-accent: #a0a0b2;
   --brand-accent-light: #22222c;
   --border-subtle: rgba(255, 255, 255, 0.08);
   --border-default: rgba(255, 255, 255, 0.14);
   --border-strong: rgba(255, 255, 255, 0.24);
   --header-bg: rgba(12, 12, 14, 0.95);
   --header-border: rgba(255, 255, 255, 0.10);
   --header-text: #ffffff;
   --header-mega-bg: #141418;
   --footer-bg: #09090b;
   --footer-border: rgba(255, 255, 255, 0.10);
   --footer-heading: rgba(255, 255, 255, 0.6);
   --footer-link: rgba(255, 255, 255, 0.7);
   --footer-link-hover: #ffffff;
   --footer-badge-filter: grayscale(100%) invert(1);
   --btn-primary-bg: #ffffff;
   --btn-primary-text: #0c0c0e;
   --btn-primary-hover-bg: #e0e0e8;

   PRESET 2: WARM STONE / EDITORIAL CREAM
   -------------------------------------------------
   --bg-page: #f0ede8;
   --bg-surface: #e8e4dd;
   --bg-surface-alt: #ddd9d2;
   --bg-card: #ffffff;
   --bg-card-hover: #faf8f5;
   --text-primary: #111111;
   --text-secondary: rgba(17, 17, 17, 0.75);
   --text-muted: rgba(17, 17, 17, 0.55);
   --brand-primary: #111111;
   --brand-primary-hover: #2d2d2d;
   --brand-accent: #555555;
   --header-bg: rgba(240, 237, 232, 0.97);
   --footer-bg: #e8e4dd;
   --footer-badge-filter: grayscale(100%);

   PRESET 3: TECH BLUE / MODERN SAAS
   -------------------------------------------------
   --bg-page: #ffffff;
   --bg-surface: #f4f6fa;
   --bg-surface-alt: #e9eef7;
   --bg-card: #ffffff;
   --bg-card-hover: #f9fbfd;
   --text-primary: #0f172a;
   --text-secondary: #475569;
   --text-muted: #94a3b8;
   --brand-primary: #2563eb;
   --brand-primary-hover: #1d4ed8;
   --brand-accent: #3b82f6;
   --header-bg: rgba(255, 255, 255, 0.97);
   --footer-bg: #0f172a;
   --footer-heading: #94a3b8;
   --footer-link: #cbd5e1;
   --footer-link-hover: #ffffff;
   --footer-badge-filter: grayscale(100%);
   ========================================================================== */