/* ============================================
   Glifo Estudio — Design Tokens
   Override Open Props / Pico CSS defaults
   Dark mode first · Arte + Craft + Tecnología
   ============================================ */

:root {
  /* — Brand Colors — */
  --glifo-accent: #8B5CF6;        /* violet-500 — creative accent */
  --glifo-accent-light: #A78BFA;  /* violet-400 */
  --glifo-accent-dark: #7C3AED;   /* violet-600 */
  --glifo-accent-glow: rgba(139, 92, 246, 0.25);
  
  --glifo-surface-0: #0B0B0F;     /* deepest bg */
  --glifo-surface-1: #12121A;     /* cards */
  --glifo-surface-2: #1A1A26;     /* elevated */
  --glifo-surface-3: #242436;     /* borders, subtle */
  
  --glifo-text: #EEEEF2;
  --glifo-text-muted: #9999AA;
  --glifo-text-dim: #666677;

  /* — Pico overrides — */
  --pico-background-color: var(--glifo-surface-0);
  --pico-card-background-color: var(--glifo-surface-1);
  --pico-card-border-color: var(--glifo-surface-3);
  --pico-card-sectioning-background-color: var(--glifo-surface-2);
  --pico-color: var(--glifo-text);
  --pico-muted-color: var(--glifo-text-muted);
  --pico-primary: var(--glifo-accent);
  --pico-primary-hover: var(--glifo-accent-light);
  --pico-primary-focus: var(--glifo-accent-glow);
  --pico-primary-background: var(--glifo-accent);
  --pico-primary-hover-background: var(--glifo-accent-dark);
  --pico-secondary: var(--glifo-surface-3);
  --pico-secondary-hover: var(--glifo-surface-2);
  --pico-border-radius: 0.75rem;
  --pico-form-element-background-color: var(--glifo-surface-2);
  --pico-form-element-border-color: var(--glifo-surface-3);
  --pico-form-element-focus-color: var(--glifo-accent);

  /* — Typography — */
  --pico-font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --pico-font-size: 100%;
  --pico-line-height: 1.6;
  --glifo-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* — Spacing scale — */
  --glifo-space-xs: 0.25rem;
  --glifo-space-sm: 0.5rem;
  --glifo-space-md: 1rem;
  --glifo-space-lg: 2rem;
  --glifo-space-xl: 4rem;
  --glifo-space-2xl: 6rem;

  /* — Shadows — */
  --glifo-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --glifo-shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --glifo-shadow-glow: 0 0 20px var(--glifo-accent-glow);

  /* — Transitions — */
  --glifo-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --glifo-duration: 0.2s;

  color-scheme: dark;
}

/* — Global resets — */
body {
  background: var(--glifo-surface-0);
  color: var(--glifo-text);
  font-family: var(--pico-font-family);
}

/* — Links — */
a { color: var(--glifo-accent-light); }
a:hover { color: var(--glifo-accent); }

/* — Cards enhanced — */
article {
  background: var(--glifo-surface-1);
  border: 1px solid var(--glifo-surface-3);
  box-shadow: var(--glifo-shadow-sm);
  transition: box-shadow var(--glifo-duration) var(--glifo-ease),
              transform var(--glifo-duration) var(--glifo-ease);
}
article:hover {
  box-shadow: var(--glifo-shadow-glow);
  transform: translateY(-2px);
}

/* — Buttons — */
[role="button"], button, input[type="submit"], .btn {
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: all var(--glifo-duration) var(--glifo-ease);
}

/* — Accent gradient text utility — */
.glifo-gradient {
  background: linear-gradient(135deg, var(--glifo-accent-light), #EC4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* — Badge/tag utility — */
.tag {
  display: inline-block;
  padding: 0.2em 0.6em;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 2rem;
  background: var(--glifo-surface-2);
  color: var(--glifo-accent-light);
  border: 1px solid var(--glifo-surface-3);
}

/* — Nav — */
nav {
  border-bottom: 1px solid var(--glifo-surface-3);
}

/* — Section spacing — */
section {
  padding: var(--glifo-space-xl) 0;
}

/* — Hero pattern — */
.hero {
  text-align: center;
  padding: var(--glifo-space-2xl) 0 var(--glifo-space-xl);
}
.hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.1; }
.hero p { font-size: 1.15rem; color: var(--glifo-text-muted); max-width: 600px; margin: var(--glifo-space-md) auto; }

/* — Grid utilities — */
.grid-cards {
  display: grid;
  gap: var(--glifo-space-lg);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* — Footer — */
footer {
  border-top: 1px solid var(--glifo-surface-3);
  color: var(--glifo-text-dim);
  text-align: center;
  padding: var(--glifo-space-lg) 0;
  font-size: 0.875rem;
}