/* ============================================
   INDEX THEME TOKENS
   Base design language + Ember variant
   ============================================ */

/* --------------------------------------------
   Core design tokens (base / neutral theme)
   -------------------------------------------- */
:root {
  /* ---- Colour primitives ---- */
  --color-bg-page: #000000;
  --color-bg-overlay: rgba(0, 0, 0, 0.45);

  /* Surfaces */
  --color-surface-glass: rgba(255, 255, 255, 0.08);
  --color-surface-tile-dark: rgba(28, 28, 28, 0.85);
  --color-surface-backtotop: rgba(255, 255, 255, 0.1);

  /* Borders */
  --color-border-light: rgba(255, 255, 255, 0.15);
  --color-border-subtle: rgba(255, 255, 255, 0.1);
  --color-border-strong: rgba(255, 255, 255, 0.2);

  /* Text (neutral defaults) */
  --color-text-primary: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.75);
  --color-text-inverse: #000000;

  /* Accent (neutral placeholder — overridden by Ember) */
  --color-accent-primary: #ffffff;
  --color-accent-primary-hover: #f3f3f3;

  /* Fell icon (neutral placeholder) */
  --color-fell-icon: #ffffff;
  --color-fell-icon-rgb: 255, 255, 255;

  --fell-icon-gradient: linear-gradient(
    to top,
    rgba(var(--color-fell-icon-rgb), 0.4),
    rgba(var(--color-fell-icon-rgb), 0.9)
  );

  /* ---- Shadows ---- */
  --shadow-tile: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-tile-hover: 0 8px 18px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 10px 24px rgba(0, 0, 0, 0.5);

  /* ---- Radii ---- */
  --radius-tile: 12px;
  --radius-card: 16px;
  --radius-backtotop: 12px;

  /* ---- Typography ---- */
  --font-family-base: Arial, Helvetica, sans-serif;
  --font-size-body: 1rem;
  --font-size-h1-min: 2.5rem;
  --font-size-h1-max: 4.5rem;
  --font-size-h2-min: 2rem;
  --font-size-h2-max: 3rem;
  --font-size-p-min: 1.2rem;
  --font-size-p-max: 1.8rem;

  /* ---- Opacity ---- */
  --opacity-muted: 0.9;

  /* ---- Transitions ---- */
  --transition-slow: 2s ease-in-out;
  --transition-med: 1.2s ease-out;
  --transition-fast: 0.25s ease;

  /* ---- Breakpoints ---- */
  --bp-md: 900px;
  --bp-sm: 600px;
}

/* ============================================
   THEME: Ember
   Warm, glowing, brand-coloured
   ============================================ */
:root[data-theme="ember"] {
  /* Text */
  --color-text-primary: #ff9b42;
  --color-text-muted: rgba(255, 155, 66, 0.75);

  /* Accent */
  --color-accent-primary: #ff9b42;
  --color-accent-primary-hover: #f48a2a;

  /* Fell icon */
  --color-fell-icon: #ff9b42;
  --color-fell-icon-rgb: 255, 155, 66;

  --fell-icon-gradient: linear-gradient(
    to top,
    rgba(var(--color-fell-icon-rgb), 0.4),
    rgba(var(--color-fell-icon-rgb), 0.9)
  );
}