/* IMPORTS */
@import url('./font-styles.css');
@import url('./animations.css');
@import url('./responsive.css');

:root {
  /*────────────────────────────────────────────────────────
    LAYER 1: RAW PALETTE
    All colors available in the system.
    Add more if you need new shades.
    ────────────────────────────────────────────────────────
  */
  --transparency: .75;

  /* Runic blue (the "E" in the logo — brand blue) */
  --c-blue: 74, 111, 165;
  /* original logo */
  --c-blue-light: 106, 149, 208;
  --c-blue-dim: 38, 61, 92;
  --c-blue-glow: 74, 111, 165, var(--transparency);

  /* Electric blue (the more vibrant variant) */
  --c-electric: 30, 111, 232;
  --c-electric-light: 74, 159, 245;
  --c-electric-dim: 13, 58, 128;
  --c-electric-glow: 30, 111, 232, var(--transparency);

  /* Forest green (dark, druidic atmosphere) */
  --c-green: 30, 58, 40;
  /* original landing */
  --c-green-light: 42, 82, 56;
  --c-green-dim: 17, 31, 23;
  --c-green-glow: 30, 58, 40, var(--transparency);

  /* Medium green (more visible on dark backgrounds) */
  --c-green-mid: 35, 107, 66;
  --c-green-mid-light: 46, 144, 88;
  --c-green-mid-dim: 21, 61, 39;
  --c-green-mid-glow: 35, 107, 66, var(--transparency);

  /* Gold/amber (emphasis, prices) */
  --c-gold: 201, 148, 26;
  --c-gold-light: 232, 184, 74;
  --c-gold-dim: 122, 88, 16;
  --c-gold-glow: 201, 148, 26, var(--transparency);

  /* Warm amber (slightly more orange variant) */
  --c-amber: 232, 160, 32;
  --c-amber-light: 245, 192, 80;
  --c-amber-dim: 138, 92, 10;
  --c-amber-glow: 232, 160, 32, var(--transparency);

  /* Ivory brown */
  --c-white: 240, 232, 216;
  --c-white-light: 200, 184, 152;
  --c-white-dim: 160, 155, 150;
  --c-white-glow: 56, 48, 40, var(--transparency);

  /* Cyan/sky (cold contrast) */
  --c-cyan: 56, 196, 232;
  --c-cyan-light: 125, 219, 242;
  --c-cyan-dim: 26, 111, 132;
  --c-cyan-glow: 56, 196, 232, var(--transparency);

  /* Feedback colors */
  --c-danger: 192, 57, 43;
  --c-success: 39, 174, 96;
  --c-warning: 212, 135, 10;

  /*────────────────────────────────────────────────────────
    LAYER 2: TEMPLATES
    Change only the var(--c-xxx) for a full reskin.

    TEMPLATE 1: Original (dark backgrounds, runic blue, gold accent)

      - Primary: --c-blue
      - Secondary: --c-green
      - Accent: --c-gold

    TEMPLATE 2: Forest green + vibrant blue (more visible, vibrant)

      - Primary: --c-blue
      - Secondary: --c-green
      - Accent: --c-cyan

    TEMPLATE 3: Forest green + warm amber (druidic, cozy atmosphere)

      - Primary: --c-green-mid
      - Secondary: --c-green
      - Accent: --c-amber

     *** This is the switch for the palette ***
     Create your own pointing to the colors in Layer 1.
    ────────────────────────────────────────────────────────
  */
  --color-primary-rgb: var(--c-blue);
  --color-primary: rgb(var(--c-blue));
  --color-primary-light: rgb(var(--c-blue-light));
  --color-primary-dim: rgb(var(--c-blue-dim));
  --color-primary-glow: rgba(var(--c-blue-glow));

  --color-secondary-rgb: var(--c-green);
  --color-secondary: rgb(var(--c-green));
  --color-secondary-light: rgb(var(--c-green-light));
  --color-secondary-dim: rgb(var(--c-green-dim));
  --color-secondary-glow: rgba(var(--c-green-glow));

  --color-accent-rgb: var(--c-cyan);
  --color-accent: rgb(var(--c-cyan));
  --color-accent-light: rgb(var(--c-cyan-light));
  --color-accent-dim: rgb(var(--c-cyan-dim));
  --color-accent-glow: rgba(var(--c-cyan-glow));

  /* MAIN TEXT COLORS */
  /* Deprecated: use --text, --text-warm, --text-dim, --text-ghost, --void */

  /* FEEDBACK MESSAGE COLORS */
  --color-danger: rgb(var(--c-danger));
  --color-success: rgb(var(--c-success));
  --color-warning: rgb(var(--c-warning));

  /* SURFACES - UI Backgrounds and Layers Based on the secondary palette (hero backgrounds, cards) */
  --void: rgb(4, 4, 10);
  --bg: var(--color-secondary);
  --bg-mid: var(--color-secondary-dim);

  --bg-image: linear-gradient(180deg, rgba(var(--color-secondary-rgb), .75), rgba(0, 0, 0, .75)),
    radial-gradient(circle at 0% 0%, rgba(var(--color-secondary-rgb), .75), transparent 25%),
    radial-gradient(circle at 100% 10%, rgba(var(--color-secondary-rgb), .75), transparent 18%),
    radial-gradient(circle at 50% 20%, rgba(var(--color-secondary-rgb), .75), transparent 35%),
    url('../images/back_runes.jpg');
  --bg-image-size: cover;
  --bg-image-position: center;

  --surface: linear-gradient(135deg, rgba(var(--c-green-dim), .75), rgba(var(--c-green-dim), .5));
  --surface-2: linear-gradient(135deg, rgba(var(--c-green-dim), .5), rgba(var(--c-green-dim), .25));
  --surface-3: linear-gradient(135deg, rgba(var(--c-green-dim), 1), rgba(var(--c-green-dim), .75));
  --surface-blurred: rgba(var(--color-secondary), .35);

  --bg-radial: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(var(--color-secondary), .45) 0%, transparent 70%),
    var(--surface-blurred);

  /* TEXT */
  --text: rgb(var(--c-white));
  /* warm ivory */
  --text-warm: rgb(var(--c-white-light));
  /* secondary */
  --text-dim: rgb(var(--c-white-dim));
  /* meta, placeholder */
  --text-ghost: rgba(var(--c-white-glow));
  /* very subtle decorative */

  /* BORDERS */
  --border: rgba(var(--color-secondary-rgb), .25);
  --border-primary: var(--color-primary-glow);
  --border-accent: var(--color-accent-glow);

  --danger: var(--color-danger);
  --success: var(--color-success);

  /* SPACING · RADIUS · SHADOWS · TRANSITIONS */
  --gap-xs: .4rem;
  --gap-sm: .8rem;
  --gap: 1.6rem;
  --gap-lg: 3.2rem;
  --gap-xl: 6.4rem;

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 16px;

  --shadow: 0 4px 24px rgba(0, 0, 0, .6);
  --shadow-accent: 0 0 32px var(--color-accent-glow);
  --shadow-primary: 0 0 24px var(--color-primary-glow);

  --ease: .25s cubic-bezier(.4, 0, .2, 1);
  --transition-default: all var(--ease);
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 17px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--surface-3);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: .1em;
  min-height: 100vh;

  /* Prevent text selection & right-click (applied via JS security.js too) */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* Allow selection in inputs */
input,
textarea {
  user-select: text;
  -webkit-user-select: text;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-accent-light);
  text-decoration: none;
  transition: color var(--ease);

  &:hover {
    color: var(--color-accent);
  }
}

ul {
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
}

textarea {
  resize: vertical;
  min-height: 120px;
}

/* Utility classes */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.container {
  width: min(1200px, 100% - 4rem);
  margin: 0 auto;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.center {
  text-align: center;
}

.hidden {
  display: none !important;
}

.blurred {
  /* Glassmorphism: a semitransparent effect */
  background: var(--surface-blurred) !important;
  backdrop-filter: blur(2rem) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(2rem) saturate(1.4) !important;
  border-color: var(--border) !important;
  box-shadow:
    0 .5rem 2.5rem rgba(0, 0, 0, .6),
    inset 0 .1rem 0 rgba(255, 255, 255, .05) !important;
}

.rune {
  font-family: var(--font-body);
  font-size: 1.8rem;
  font-weight: normal;
  color: var(--text);
}

/* Runic divider */
.rune-divider {
  display: flex;
  align-items: center;
  gap: var(--gap);
  width: 100%;
  margin: var(--gap-lg) 0;
  color: var(--color-primary-light);
  font-family: var(--font-heading);
  font-size: 1.4rem;
  letter-spacing: .3em;

  &::before,
  &::after {
    content: '';
    flex: 1;
    height: .15rem;
    background: linear-gradient(90deg, transparent, var(--color-primary-light), transparent);
  }
}

/* Card component */
.card {
  position: relative;
  width: calc(100% - var(--gap));
  padding: var(--gap);
  color: var(--text);
  background: var(--color-secondary-glow);
  box-shadow: 0 0 2rem var(--color-secondary-dim);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition-default);

  &.card-link {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    margin: 0 -.5rem;
    text-decoration: none;
    aspect-ratio: 3/1;
  }

  &:hover {
    background: var(--color-secondary-dim);
    box-shadow: 0 0 32px rgba(var(--color-secondary-rgb), .25);
  }

  .icon-large {
    color: var(--text);
  }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin: 0 auto;
  padding: .5rem 1rem;
  border: .15rem solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--ease);
  white-space: nowrap;
  text-wrap: auto;

  color: var(--text);
  background: var(--color-primary-dim);
  border-color: var(--color-primary-dim);

  &.btn-primary {
    color: var(--text);
    background: var(--color-primary);
    border-color: var(--color-primary);

    &:hover {
      background: var(--color-primary-dim);
      border-color: var(--color-primary-light);
      box-shadow: var(--shadow-primary);
    }
  }

  &.btn-secondary {
    color: var(--text);
    background: var(--surface-blurred);
    border-color: var(--color-primary);

    &:hover {
      background: var(--color-primary-glow);
      border-color: var(--color-primary-glow);
    }
  }

  &.btn-danger {
    background: transparent;
    color: var(--danger);
    border-color: rgba(var(--c-danger), .4);

    &:hover {
      background: rgba(var(--c-danger), .15);
    }
  }

  &.btn-full {
    width: 100%;
    justify-content: center;
  }

  &.btn-sm {
    padding: 1em;
    font-size: .65rem;
  }

  &.btn-lg {
    padding: 1.1rem 2.6em;
    font-size: 1rem;
  }

  &.btn-block {
    width: 100%;
    justify-content: center;
  }

  &:disabled {
    opacity: .5;
    cursor: not-allowed;
  }
}

/* FLEX */
.flex-row-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  padding: var(--gap-sm) 0;
}

.flex-between-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  padding: var(--gap-sm) 0;
}

.flex-end-wrap {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: var(--gap-sm);
  padding: var(--gap-sm) 0;
}

.grid-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap-sm);
}

.grid-cols-2 {
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-sm);
}

.text-muted {
  color: var(--text-dim);
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.modal-wide {
  width: min(640px, 100%);
}

.mt-lg {
  margin-top: var(--gap-lg);
}

.mb-gap {
  margin-bottom: var(--gap);
}

.p-gap-lg {
  padding: var(--gap-lg);
}

.section-heading {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: .2rem;
}

.section-label {
  font-family: var(--font-heading);
  font-size: .875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--gap-sm);
}

.text-accent {
  color: var(--color-accent);
}

.text-primary-light {
  color: var(--color-primary-light);
}

.icon-large {
  font-size: 2rem;
}

.card-title {
  font-family: var(--font-heading);
  color: var(--text);
  margin-bottom: .2rem;
}

.card-desc {
  font-size: .85rem;
  color: var(--text-dim);
}

.section-divider {
  margin-top: var(--gap);
  border-top: .1rem solid var(--border);
  padding-top: var(--gap);
}

.font-small {
  font-size: .85rem;
}

.flex-fill {
  flex: 1;
}

.m-0 {
  margin: 0 !important;
}

/* Form elements */
.form-group {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: var(--gap);

  label {
    font-family: var(--font-heading);
    font-size: .8rem;
    letter-spacing: .1em;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-warm);
  }

  .form-control {
    width: 100%;
    padding: .75em 1em;
    background: rgba(var(--color-secondary-rgb), .85);
    border: .1rem solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: var(--transition-default);

    &:hover,
    &:focus {
      outline: none;
      border-color: var(--border-secondary);
      box-shadow: 0 0 0 .25rem var(--color-secondary-glow);
    }

    &::placeholder {
      color: var(--text-dim);
      font-style: italic;
    }
  }
}

/* Footer credit (author) */
/*
 * Clase base: compartida por ambas variantes.
 * .footer-credit         → landing y páginas completas
 * .footer-credit-sidebar → paneles con sidebar (admin, dashboard)
 */
.footer-credit,
.footer-credit-sidebar {
  font-family: var(--font-heading);
  letter-spacing: .04em;
  opacity: .65;
  transition: opacity var(--ease);

  &:hover {
    opacity: 1;
  }

  a {
    color: var(--color-primary-light);
    text-decoration: none;
    transition: color var(--ease);

    &:hover {
      color: var(--color-accent-light);
    }
  }
}

/* Variante landing: texto centrado bajo el copyright */
.footer-credit {
  font-size: .75rem;
  text-align: center;
  color: var(--text-dim);
  margin-top: .4rem;
}

/* Variante sidebar: más pequeña, discreta en el pie del panel */
.footer-credit-sidebar {
  font-size: .65rem;
  text-align: center;
  color: var(--text-dim);
  margin-top: .8rem;
  display: block;
}

/* Toast notifications */
#toast-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: .8rem;

  .toast {
    background: var(--surface-3);
    border: .1rem solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.4rem;
    font-family: var(--font-heading);
    font-size: .875rem;
    min-width: 280px;
    box-shadow: var(--shadow);
    animation: slideIn .3s ease;
    display: flex;
    align-items: center;
    gap: .8rem;

    &.success {
      border-color: var(--success);
    }

    &.error {
      border-color: var(--danger);
    }

    &.info {
      border-color: var(--color-primary);
    }
  }
}

.alert-box {
  display: none;
  padding: .75rem 1rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: .875rem;
  margin-bottom: var(--gap);

  &.success {
    display: block;
    background: rgba(var(--success), .5);
    border: .1rem solid var(--success);
    color: var(--success);
  }

  &.error {
    display: block;
    background: rgba(var(--danger), .1);
    border: .1rem solid var(--danger);
    color: var(--danger);
  }
}

/* Loading spinner */
.spinner {
  width: 2.4rem;
  height: 2.4rem;
  border: .5rem solid var(--surface-3);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin: var(--gap-lg) auto;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: .5rem;
}

::-webkit-scrollbar-track {
  background: var(--color-primary-dim);
}

::-webkit-scrollbar-thumb {
  background: var(--color-primary-light);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-glow);
}