/* ============================================================
   AMPORIA DESIGN SYSTEM — colors_and_type.css
   Source: layouts/newgreatz/theme.css + style.css (V4.0)
   4 Themes: Empire · Empire Light · Nexus · Nexus Light
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Metamorphous&family=Albert+Sans:wght@300;400;500;600;700;800&display=swap');

/* ── SHARED STRUCTURAL TOKENS ───────────────────────────── */
:root {
  /* Typography */
  --font-display: 'Metamorphous', serif;
  --font-hero:    'Cinzel', serif;
  --font-body:    'Albert Sans', sans-serif;

  /* Type Scale */
  --text-xs:   0.75rem;     /* 12px */
  --text-sm:   0.875rem;    /* 14px */
  --text-base: 1rem;        /* 16px */
  --text-md:   1.125rem;    /* 18px */
  --text-lg:   1.25rem;     /* 20px */
  --text-xl:   clamp(1.33rem, 1.33rem + 0.5vw, 1.5rem);
  --text-2xl:  clamp(1.77rem, 1.77rem + 1vw, 2rem);
  --text-3xl:  clamp(2.36rem, 2.36rem + 1.5vw, 3rem);
  --text-4xl:  clamp(3.15rem, 3.15rem + 2.5vw, 4.5rem);

  /* Spacing Scale */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Animation Easings */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows */
  
  --shadow-card:       0 4px 20px rgba(0,0,0,0.8);
  --shadow-card-hover: 0 8px 30px rgba(0,0,0,0.95);
  --shadow-nav:        0 4px 20px rgba(0,0,0,0.8);
  --shadow-elevated:   0 8px 30px rgba(0,0,0,0.95);
}


/* ── EMPIRE: Gold × Black (dark, DEFAULT) ───────────────── */
:root,
.theme-empire,
[data-theme="empire"] {
  /* Backgrounds */
  --bg-primary:   #030303;
  --bg-surface:   #111111;
  --bg-elevated:  #1c1c1c;

  /* Text */
  --text-primary:   #F2EDD7;
  --text-secondary: #C8B87A;
  --text-tertiary:  #7A6840;
  --text-black:     #030303;

  /* Accent / Gold */
  --accent:       #C9A84C;
  --accent-hover: #E8C96A;
  --primary:      #C9A84C;
  --accent-rgb:   201, 168, 76;
  --primary-rgb:  201, 168, 76;

  /* Borders */
  --border-base:   #2a2a2a;
  --border-strong: #3d3010;

  /* Nav */
  --nav-bg: #0a0a0a;

  /* Links */
  --link:       #C9A84C;
  --link-hover: #F0D890;

  /* Semantic Colors */
  --success:       #2ecc71;
  --error:         #e74c3c;
  --warning:       #C9A84C;
  --info:          #6b9ecf;
  --color-success: #2ecc71;
  --color-danger:  #e74c3c;
  --color-warning: #C9A84C;
  --color-info:    #6b9ecf;

  /* Named Accents */
  --accent-green: #2ecc71;
  --accent-pink:  #e74c3c;
  --accent-cyan:  #6b9ecf;

  /* RGB Fragments */
  --accent-green-rgb: 46, 204, 113;
  --accent-pink-rgb:  231, 76, 60;

  /* Hover overlay */
  --bg-hover: rgba(201, 168, 76, 0.05);
}

/* ── EMPIRE LIGHT: Champagne × Gold (luxury, no brown) ─── */
.theme-empire-light,
[data-theme="empire-light"] {
  --bg-primary:   #FAFAF8;   /* neutral near-white, no warm tint */
  --bg-surface:   #F2F2EE;
  --bg-elevated:  #FFFFFF;

  --text-primary:   #1A1A18;   /* near-black, neutral */
  --text-secondary: #4A4A42;
  --text-tertiary:  #9A9A8A;   /* cool grey — no brown */
  --text-black:     #1A1A18;

  --accent:       #C9A84C;   /* full rich gold */
  --accent-hover: #E8C96A;
  --primary:      #C9A84C;
  --accent-rgb:   201, 168, 76;
  --primary-rgb:  201, 168, 76;

  --border-base:   #E0DFD8;
  --border-strong: #C9A84C;

  --nav-bg: #F2F2EE;

  --link:       #A07830;
  --link-hover: #C9A84C;

  --success:       #2d7a2d;
  --error:         #c0392b;
  --warning:       #C9A84C;
  --info:          #1a5276;
  --color-success: #2d7a2d;
  --color-danger:  #c0392b;
  --color-warning: #C9A84C;
  --color-info:    #1a5276;

  --accent-green: #2d7a2d;
  --accent-pink:  #c0392b;
  --accent-cyan:  #1a5276;

  --accent-green-rgb: 45, 122, 45;
  --accent-pink-rgb:  192, 57, 43;

  --bg-hover: rgba(201, 168, 76, 0.07);
}

/* ── NEXUS: Navy × Gold (dark) ──────────────────────────── */
.theme-nexus,
[data-theme="nexus"] {
  --bg-primary:   #03080F;
  --bg-surface:   #0a1628;
  --bg-elevated:  #0f1f3a;

  --text-primary:   #F0E8D0;
  --text-secondary: #C9A84C;
  --text-tertiary:  #4a6a9a;
  --text-black:     #03080F;

  --accent:       #C9A84C;
  --accent-hover: #E8C96A;
  --primary:      #C9A84C;
  --accent-rgb:   201, 168, 76;
  --primary-rgb:  201, 168, 76;

  --border-base:   #1a2a45;
  --border-strong: #2a4070;

  --nav-bg: #020609;

  --link:       #C9A84C;
  --link-hover: #F0D890;

  --success:       #4caf50;
  --error:         #e53935;
  --warning:       #C9A84C;
  --info:          #6b9ecf;
  --color-success: #4caf50;
  --color-danger:  #e53935;
  --color-warning: #C9A84C;
  --color-info:    #6b9ecf;

  --accent-green: #4caf50;
  --accent-pink:  #e53935;
  --accent-cyan:  #6b9ecf;

  --accent-green-rgb: 76, 175, 80;
  --accent-pink-rgb:  229, 57, 53;

  --bg-hover: rgba(201, 168, 76, 0.05);
}

/* ── NEXUS LIGHT: Silver × Navy (truly light) ───────────── */
.theme-nexus-light,
[data-theme="nexus-light"] {
  --bg-primary:   #F4F6FA;   /* cool silver-white */
  --bg-surface:   #E8EDF5;
  --bg-elevated:  #FFFFFF;

  --text-primary:   #0a1628;   /* deep navy text on light bg */
  --text-secondary: #1a3a6a;
  --text-tertiary:  #6A82A8;   /* cool slate muted */
  --text-black:     #0a1628;

  --accent:       #1a3a6a;   /* navy as accent */
  --accent-hover: #0a1628;
  --primary:      #1a3a6a;
  --accent-rgb:   26, 58, 106;
  --primary-rgb:  26, 58, 106;

  --border-base:   #CDD5E4;
  --border-strong: #1a3a6a;

  --nav-bg: #E8EDF5;

  --link:       #1a3a6a;
  --link-hover: #0a1628;

  --success:       #2d7a2d;
  --error:         #c0392b;
  --warning:       #9A7A1E;
  --info:          #1a3a6a;
  --color-success: #2d7a2d;
  --color-danger:  #c0392b;
  --color-warning: #9A7A1E;
  --color-info:    #1a3a6a;

  --accent-green: #2d7a2d;
  --accent-pink:  #c0392b;
  --accent-cyan:  #1a3a6a;

  --accent-green-rgb: 45, 122, 45;
  --accent-pink-rgb:  192, 57, 43;

  --bg-hover: rgba(26, 58, 106, 0.06);
}

/* ── SEMANTIC ELEMENT ALIASES ───────────────────────────── */
:root {
  /* Heading hierarchy */
  --h1-font:   var(--font-display);
  --h1-size:   var(--text-3xl);
  --h1-weight: 700;
  --h1-color:  var(--accent);
  --h1-ls:     0.05em;

  --h2-font:   var(--font-display);
  --h2-size:   var(--text-2xl);
  --h2-weight: 600;
  --h2-color:  var(--accent);
  --h2-ls:     0.04em;

  --h3-font:   var(--font-display);
  --h3-size:   var(--text-xl);
  --h3-weight: 600;
  --h3-color:  var(--text-primary);
  --h3-ls:     0.03em;

  /* Body */
  --p-font:    var(--font-body);
  --p-size:    var(--text-base);
  --p-weight:  400;
  --p-color:   var(--text-secondary);
  --p-lh:      1.6;

  /* Label (form / card header) */
  --label-font:   var(--font-display);
  --label-size:   var(--text-xs);
  --label-weight: 700;
  --label-ls:     2px;
  --label-tt:     uppercase;

  /* Code / stats */
  --code-font:  monospace;
  --code-size:  var(--text-sm);
  --code-color: var(--accent);
}