/*
 * Alchie Design System — colors & typography
 * The single source of truth for color and type tokens.
 * Reference this file in any HTML/JSX artifact:
 *   <link rel="stylesheet" href="../colors_and_type.css">
 */

/* ─── Self-hosted fonts ─────────────────────────────── */

/* Cinzel — display / titles, key moments, fantasy accent */
@font-face {
  font-family: 'Cinzel';
  src: url('fonts/Cinzel-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 400 900;
  font-display: swap;
}

/* Manrope — UI display / level numbers / large labels */
@font-face { font-family: 'Manrope'; src: url('fonts/Manrope-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('fonts/Manrope-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('fonts/Manrope-SemiBold.otf') format('opentype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('fonts/Manrope-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('fonts/Manrope-ExtraBold.otf') format('opentype'); font-weight: 800; font-display: swap; }

/* Nunito Sans — body, UI chrome, default */
@font-face { font-family: 'Nunito Sans'; src: url('fonts/NunitoSans-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Nunito Sans'; src: url('fonts/NunitoSans-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Nunito Sans'; src: url('fonts/NunitoSans-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Nunito Sans'; src: url('fonts/NunitoSans-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Nunito Sans'; src: url('fonts/NunitoSans-Black.ttf') format('truetype'); font-weight: 900; font-display: swap; }

/* Poppins — accent: buttons, tags, badge labels */
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }


:root {
  /* ─── Brand palette (primary) ───────────────────────── */
  --brand-navy:        #004a79;   /* primary — actions, sidebar, nav */
  --brand-navy-light:  #daeaf7;
  --brand-navy-dark:   #003558;

  --brand-teal:        #007a6c;   /* secondary — success, progress */
  --brand-teal-light:  #d6efec;
  --brand-teal-dark:   #005a51;

  --brand-mint:        #4aa975;   /* tertiary — levels, growth */
  --brand-mint-light:  #e4f5ec;

  --brand-coral:       #ffa8a6;   /* warm accent — energy, fun */
  --brand-coral-light: #ffefee;

  --brand-peach:       #ffc691;   /* reward — coins, XP, stars */
  --brand-peach-light: #fff3e6;

  --brand-gold:        #d9a23a;   /* texturized logo gold (Alquie) */
  --brand-emerald:     #1f5d56;   /* texturized logo deep teal */

  /* ─── Surfaces ──────────────────────────────────────── */
  --surface-page:      #eef4f8;
  --surface-card:      #ffffff;
  --surface-frame:     #cbd5e1;
  --surface-dark:      #03040e;
  --surface-overlay:   rgba(3, 4, 14, 0.55);

  /* ─── Foreground / text ─────────────────────────────── */
  --fg-1:              #0d2033;   /* primary text */
  --fg-2:              #5a7a8c;   /* secondary / muted */
  --fg-3:              #94a3b8;   /* tertiary / placeholder */
  --fg-on-dark:        #ffffff;
  --fg-on-brand:       #ffffff;

  /* ─── Border ────────────────────────────────────────── */
  --border:            #d4e4ef;
  --border-strong:     #b8cfdf;

  /* ─── Semantic state ────────────────────────────────── */
  --success:           var(--brand-teal);
  --success-bg:        var(--brand-teal-light);
  --warning:           #d97706;
  --warning-bg:        #fef3c7;
  --danger:            #dc2626;
  --danger-bg:         #fee2e2;
  --info:              var(--brand-navy);
  --info-bg:           var(--brand-navy-light);

  /* ─── Rarity scale (8 levels) ───────────────────────── */
  --rarity-bronce:        #92400e;
  --rarity-plata:         #475569;
  --rarity-oro:           #d9a23a;
  --rarity-platino:       #0284c7;
  --rarity-diamante:      #06b6d4;
  --rarity-maestro:       #1f5d56;
  --rarity-gran-maestro:  #dc2626;
  --rarity-legendario:    linear-gradient(90deg, #ffc691, #d9a23a, #1f5d56);

  /* ─── Type families ─────────────────────────────────── */
  --font-display:  'Cinzel', 'Manrope', serif;          /* fantasy moments */
  --font-ui:       'Manrope', system-ui, sans-serif;    /* UI display */
  --font-body:     'Nunito Sans', system-ui, sans-serif;/* body text */
  --font-accent:   'Poppins', system-ui, sans-serif;    /* buttons, tags */

  /* ─── Type scale ────────────────────────────────────── */
  --text-xs:  11px;
  --text-sm:  13px;
  --text-md:  15px;
  --text-lg:  17px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;
  --text-5xl: 52px;
  --text-6xl: 72px;

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

  /* ─── Radius ────────────────────────────────────────── */
  --radius-sm:    8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 9999px;

  /* ─── Shadow (navy-tinted, soft) ────────────────────── */
  --shadow-sm: 0 2px 8px rgba(0, 74, 121, 0.06);
  --shadow-md: 0 4px 20px rgba(0, 74, 121, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 74, 121, 0.14);
  --shadow-xl: 0 24px 80px rgba(0, 74, 121, 0.20);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,74,121,0.08);

  /* ─── Layout ────────────────────────────────────────── */
  --topbar-h:   60px;
  --sidebar-w: 240px;
}

/* ─── Semantic type roles ───────────────────────────── */
/* Apply directly via class, or extend in components. */

.t-display-1 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-6xl); line-height: 1.05; letter-spacing: 0.01em; color: var(--brand-navy); }
.t-display-2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-5xl); line-height: 1.08; color: var(--brand-navy); }
.t-display-3 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-4xl); line-height: 1.15; color: var(--brand-navy); }

.t-h1 { font-family: var(--font-ui); font-weight: 800; font-size: var(--text-4xl); line-height: 1.15; color: var(--fg-1); letter-spacing: -0.01em; }
.t-h2 { font-family: var(--font-ui); font-weight: 800; font-size: var(--text-3xl); line-height: 1.2;  color: var(--fg-1); letter-spacing: -0.005em; }
.t-h3 { font-family: var(--font-ui); font-weight: 700; font-size: var(--text-2xl); line-height: 1.25; color: var(--fg-1); }
.t-h4 { font-family: var(--font-ui); font-weight: 700; font-size: var(--text-xl);  line-height: 1.3;  color: var(--fg-1); }

.t-eyebrow { font-family: var(--font-accent); font-weight: 700; font-size: var(--text-xs); line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-teal); }

.t-lead    { font-family: var(--font-body); font-weight: 400; font-size: var(--text-xl); line-height: 1.5; color: var(--fg-2); }
.t-body    { font-family: var(--font-body); font-weight: 400; font-size: var(--text-md); line-height: 1.55; color: var(--fg-1); }
.t-body-sm { font-family: var(--font-body); font-weight: 400; font-size: var(--text-sm); line-height: 1.5;  color: var(--fg-1); }
.t-caption { font-family: var(--font-body); font-weight: 600; font-size: var(--text-xs); line-height: 1.4; color: var(--fg-2); }

.t-button  { font-family: var(--font-accent); font-weight: 600; font-size: var(--text-md); line-height: 1; letter-spacing: 0.01em; }
.t-tag     { font-family: var(--font-accent); font-weight: 600; font-size: var(--text-xs); line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; }

/* Pixel-art image rendering for character/sprite assets */
.pixel-art { image-rendering: pixelated; image-rendering: crisp-edges; }