/* =============================================================
   HOMIUM Design System — Tokens
   "Tecnología sin complicaciones."
   ============================================================= */

@import url('../fonts/fonts.css');

:root {
  /* ----- BRAND COLORS ----- */
  --homium-purple:     #290640;  /* 60% — primary brand surface */
  --homium-cyan:       #00ffff;  /* 20% — primary accent / CTA */
  --homium-green:      #5aeaa2;  /* 20% — secondary accent / tag */
  --homium-white:      #ffffff;  /*       part of the palette  */
  --homium-black-90:   rgba(0, 0, 0, 0.9);

  /* Purple shades */
  --purple-950: #150220;
  --purple-900: #1d042d;
  --purple-800: #240537;
  --purple-700: #290640;
  --purple-600: #380a55;
  --purple-500: #4a1170;
  --purple-400: #6a2a9c;
  --purple-300: #8e57bf;
  --purple-200: #b48cd6;
  --purple-100: #d8c2ea;
  --purple-50:  #f1e9f7;

  /* Cyan shades */
  --cyan-700: #00b8b8;
  --cyan-600: #00d6d6;
  --cyan-500: #00ffff;
  --cyan-400: #5cffff;
  --cyan-300: #9bffff;
  --cyan-200: #c4ffff;

  /* Green shades */
  --green-700: #2bb077;
  --green-600: #3fcc8d;
  --green-500: #5aeaa2;
  --green-400: #8af1bb;
  --green-300: #b5f6d2;
  --green-200: #d8fbe6;

  /* Magenta / Amber */
  --magenta-500: #ff3bd4;
  --amber-500:   #ffb300;

  /* ----- SEMANTIC TOKENS ----- */
  --bg:              var(--homium-purple);
  --bg-elevated:     #380a55;
  --bg-sunken:       #1d042d;
  --surface-cyan:    var(--homium-cyan);
  --surface-overlay: rgba(255,255,255,0.04);

  --fg:              var(--homium-white);
  --fg-muted:        rgba(255,255,255,0.72);
  --fg-subtle:       rgba(255,255,255,0.50);
  --fg-on-cyan:      var(--homium-purple);
  --fg-on-green:     var(--homium-purple);

  --accent:          var(--homium-cyan);
  --accent-2:        var(--homium-green);
  --accent-display:  var(--homium-cyan);

  --link:            var(--homium-cyan);
  --link-hover:      var(--cyan-300);

  --border:          rgba(255,255,255,0.14);
  --border-strong:   rgba(255,255,255,0.28);
  --border-cyan:     var(--homium-cyan);

  --focus-ring:      var(--homium-cyan);

  /* ----- RADII ----- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ----- SPACING ----- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;

  /* ----- SHADOWS & GLOWS ----- */
  --shadow-card:  0 8px 32px rgba(0,0,0,0.35);
  --shadow-lift:  0 18px 48px rgba(0,0,0,0.45);
  --glow-cyan:    0 0 24px rgba(0,255,255,0.45);
  --glow-green:   0 0 24px rgba(90,234,162,0.40);
  --glow-purple:  0 40px 120px -20px rgba(90,40,180,0.55);

  /* ----- TYPE SYSTEM ----- */
  --font-sans: 'Rubik', system-ui, -apple-system, sans-serif;
  --font-display: 'Rubik', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
}

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after {
  box-sizing: inherit;
}

::selection {
  background: var(--homium-cyan);
  color: var(--homium-purple);
}