/* ============================================================
   RAM Technologies — Tokens del design system
   Copiado desde el design system RAM que acompaña al mockup:
   _ds/ram-technologies-design-system-.../tokens/
   Orden obligatorio: fonts -> colors -> typography -> spacing
                      -> effects -> base
   No editar los valores a mano: son la fuente de marca.
   ============================================================ */

/* ============================================================
   RAM Technologies — Fonts
   Brand wordmark is a bold geometric sans. Montserrat is the
   closest free Google Fonts match for the "RAM" lockup and the
   tracked "TECHNOLOGIES" sub-label. Manrope handles UI/body;
   JetBrains Mono covers code & data. (See readme — Montserrat
   is a SUBSTITUTE pending the original brand font files.)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ============================================================
   RAM Technologies — Color Tokens
   Base palette is sourced directly from the official brand
   color sheet (Paleta-colores-RAM). Tints/shades and semantic
   aliases are derived to support a full UI system.
   ============================================================ */

:root {
  /* ---- Brand core (from official palette) ---- */
  --ram-royal:        #1F299C; /* Primary brand blue */
  --ram-navy:         #16205B; /* Deep navy — dark surfaces, ink */
  --ram-slate:        #767BA8; /* Muted slate — secondary text */
  --ram-pale:         #E1EAF9; /* Pale blue — tinted surfaces */
  --ram-cyan:         #30D1FF; /* Electric cyan — highlight */
  --ram-azure:        #0372FF; /* Bright azure blue — action */
  --ram-periwinkle:   #A3A9F5; /* Soft periwinkle — accent */
  --ram-orange:       #F15928; /* Signal orange — single accent */

  /* ---- Royal blue ramp ---- */
  --royal-50:  #eef0fb;
  --royal-100: #d9dcf3;
  --royal-200: #b3b9e8;
  --royal-300: #8088d6;
  --royal-400: #4f59bf;
  --royal-500: #1F299C; /* base */
  --royal-600: #1a237f;
  --royal-700: #161d66;
  --royal-800: #12184f;
  --royal-900: #0d113a;

  /* ---- Azure (action) ramp ---- */
  --azure-50:  #e6f1ff;
  --azure-100: #c2dcff;
  --azure-200: #84b8ff;
  --azure-300: #4795ff;
  --azure-400: #1a80ff;
  --azure-500: #0372FF; /* base */
  --azure-600: #025fd6;
  --azure-700: #024aa8;
  --azure-800: #01387f;
  --azure-900: #012757;

  /* ---- Cyan ramp ---- */
  --cyan-50:  #e8faff;
  --cyan-100: #c2f1ff;
  --cyan-200: #8ae6ff;
  --cyan-300: #30D1FF; /* base */
  --cyan-400: #16b8e8;
  --cyan-500: #0f9bc6;

  /* ---- Neutral / ink ramp (cool, navy-tinted greys) ---- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f6f8fd;
  --neutral-100: #eef1f8;
  --neutral-200: #dfe4f0;
  --neutral-300: #c6cde0;
  --neutral-400: #9aa3c2;
  --neutral-500: #767BA8; /* slate base */
  --neutral-600: #565d86;
  --neutral-700: #3d4368;
  --neutral-800: #262c4d;
  --neutral-900: #16205B; /* navy */
  --neutral-950: #0d1238;

  /* ---- Signal / status ---- */
  --signal-orange: #F15928;
  --success-500:   #1f9d6b;
  --success-100:   #d6f3e6;
  --warning-500:   #e8a008;
  --warning-100:   #fbeecb;
  --danger-500:    #e23b3b;
  --danger-100:    #fbdada;
  --info-500:      #0372FF;
  --info-100:      #c2dcff;

  /* ---- Brand gradients ---- */
  --gradient-brand:  linear-gradient(120deg, #30D1FF 0%, #4f8efc 45%, #8b6ff2 100%); /* @kind color */
  --gradient-royal:  linear-gradient(135deg, #1F299C 0%, #0372FF 100%); /* @kind color */
  --gradient-navy:   linear-gradient(160deg, #1c2a8a 0%, #16205B 55%, #111a4a 100%); /* @kind color */
  --gradient-cyan:   linear-gradient(120deg, #30D1FF 0%, #0372FF 100%); /* @kind color */

  /* ============================================================
     Semantic aliases — light theme (default)
     ============================================================ */
  --bg-base:        var(--neutral-0);
  --bg-subtle:      var(--neutral-50);
  --bg-muted:       var(--neutral-100);
  --bg-tint:        var(--ram-pale);
  --bg-inverse:     var(--ram-navy);

  --surface-card:   var(--neutral-0);
  --surface-raised: var(--neutral-0);
  --surface-sunken: var(--neutral-50);

  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-brand:   var(--royal-500);

  --text-strong:    var(--ram-navy);
  --text-body:      #2a3158;
  --text-muted:     var(--neutral-500);
  --text-subtle:    var(--neutral-400);
  --text-inverse:   var(--neutral-0);
  --text-brand:     var(--royal-500);
  --text-link:      var(--azure-500);

  --action-primary:        var(--royal-500);
  --action-primary-hover:  var(--royal-600);
  --action-primary-press:  var(--royal-700);
  --action-accent:         var(--azure-500);
  --action-accent-hover:   var(--azure-600);
  --action-accent-press:   var(--azure-700);

  --focus-ring:     var(--azure-400);
}

/* ============================================================
   Dark theme scope — navy foundation
   ============================================================ */
[data-theme="dark"] {
  --bg-base:        var(--neutral-950);
  --bg-subtle:      var(--ram-navy);
  --bg-muted:       #1c2454;
  --bg-tint:        #1a2356;
  --bg-inverse:     var(--neutral-0);

  --surface-card:   #1a2356;
  --surface-raised: #20296a;
  --surface-sunken: #131a45;

  --border-subtle:  #2a3470;
  --border-default: #36418a;
  --border-strong:  #4a55a8;
  --border-brand:   var(--cyan-300);

  --text-strong:    var(--neutral-0);
  --text-body:      #d4daf0;
  --text-muted:     var(--periwinkle, #A3A9F5);
  --text-subtle:    #7d86b8;
  --text-inverse:   var(--ram-navy);
  --text-brand:     var(--cyan-300);
  --text-link:      var(--cyan-300);

  --action-primary:        var(--azure-500);
  --action-primary-hover:  var(--azure-400);
  --action-primary-press:  var(--azure-300);
  --action-accent:         var(--cyan-300);
  --action-accent-hover:   var(--cyan-200);
  --action-accent-press:   var(--cyan-100);

  --focus-ring:     var(--cyan-300);
}

/* ============================================================
   RAM Technologies — Typography Tokens
   Display: Montserrat (geometric, matches brand wordmark)
   UI/Body: Manrope
   Mono:    JetBrains Mono
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- Weights ---- */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */
  --fw-black:     900; /* @kind font */

  /* ---- Type scale (1.250 major-third on a 16px base) ---- */
  --text-2xs:  0.6875rem; /* 11px — micro labels */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.25rem;   /* 20px */
  --text-xl:   1.5rem;    /* 24px */
  --text-2xl:  1.875rem;  /* 30px */
  --text-3xl:  2.25rem;   /* 36px */
  --text-4xl:  3rem;      /* 48px */
  --text-5xl:  3.75rem;   /* 60px */
  --text-6xl:  4.5rem;    /* 72px */

  /* ---- Line heights ---- */
  --leading-tight:   1.1;  /* @kind font */
  --leading-snug:    1.25; /* @kind font */
  --leading-normal:  1.5;  /* @kind font */
  --leading-relaxed: 1.7;  /* @kind font */

  /* ---- Letter spacing ---- */
  --tracking-tighter: -0.03em;  /* @kind font */
  --tracking-tight:   -0.015em; /* @kind font */
  --tracking-normal:  0em;      /* @kind font */
  --tracking-wide:    0.04em;    /* @kind font */
  --tracking-wider:   0.12em;    /* eyebrow / "TECHNOLOGIES" style @kind font */
  --tracking-widest:  0.22em;    /* @kind font */

  /* ---- Semantic roles ---- */
  --role-display-font:    var(--font-display);
  --role-display-weight:  var(--fw-extrabold);
  --role-heading-font:    var(--font-display);
  --role-heading-weight:  var(--fw-bold);
  --role-eyebrow-font:    var(--font-display);
  --role-eyebrow-spacing: var(--tracking-wider);
  --role-body-font:       var(--font-body);
  --role-body-weight:     var(--fw-regular);
  --role-mono-font:       var(--font-mono);
}

/* ============================================================
   RAM Technologies — Spacing, Radius & Layout Tokens
   4px base grid.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4 */
  --space-2:   0.5rem;   /* 8 */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.25rem;  /* 20 */
  --space-6:   1.5rem;   /* 24 */
  --space-8:   2rem;     /* 32 */
  --space-10:  2.5rem;   /* 40 */
  --space-12:  3rem;     /* 48 */
  --space-16:  4rem;     /* 64 */
  --space-20:  5rem;     /* 80 */
  --space-24:  6rem;     /* 96 */
  --space-32:  8rem;     /* 128 */

  /* ---- Radii ---- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  /* ---- Layout ---- */
  --container-sm:  640px;  /* @kind spacing */
  --container-md:  768px;  /* @kind spacing */
  --container-lg:  1024px; /* @kind spacing */
  --container-xl:  1200px; /* @kind spacing */
  --container-2xl: 1320px; /* @kind spacing */
  --gutter:        var(--space-6);

  /* ---- Z-index ---- */
  --z-base:     1;    /* @kind other */
  --z-dropdown: 1000; /* @kind other */
  --z-sticky:   1100; /* @kind other */
  --z-overlay:  1200; /* @kind other */
  --z-modal:    1300; /* @kind other */
  --z-toast:    1400; /* @kind other */
}

/* ============================================================
   RAM Technologies — Effects: shadow, blur, motion, focus
   Shadows are cool-tinted (navy) to sit in the brand family.
   ============================================================ */

:root {
  /* ---- Elevation (navy-tinted, soft) ---- */
  --shadow-xs:  0 1px 2px rgba(22, 32, 91, 0.06);
  --shadow-sm:  0 1px 3px rgba(22, 32, 91, 0.08), 0 1px 2px rgba(22, 32, 91, 0.06);
  --shadow-md:  0 4px 12px rgba(22, 32, 91, 0.10), 0 2px 4px rgba(22, 32, 91, 0.06);
  --shadow-lg:  0 12px 28px rgba(22, 32, 91, 0.14), 0 4px 8px rgba(22, 32, 91, 0.06);
  --shadow-xl:  0 24px 50px rgba(22, 32, 91, 0.18), 0 8px 16px rgba(22, 32, 91, 0.08);

  /* ---- Brand glow (cyan/azure) for emphasis on dark ---- */
  --shadow-glow-cyan:  0 0 0 1px rgba(48, 209, 255, 0.4), 0 8px 30px rgba(48, 209, 255, 0.25);
  --shadow-glow-azure: 0 8px 30px rgba(3, 114, 255, 0.35);

  /* ---- Focus ring ---- */
  --ring-width: 3px;
  --ring-color: rgba(3, 114, 255, 0.45);
  --ring: 0 0 0 var(--ring-width) var(--ring-color); /* @kind shadow */

  /* ---- Blur ---- */
  --blur-sm: 6px;  /* @kind other */
  --blur-md: 14px; /* @kind other */
  --blur-lg: 28px; /* @kind other */

  /* ---- Motion ---- */
  --ease-standard:  cubic-bezier(0.2, 0.8, 0.2, 1);    /* @kind other */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);     /* @kind other */
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);    /* @kind other */
  --duration-fast:  120ms; /* @kind other */
  --duration-base:  200ms; /* @kind other */
  --duration-slow:  320ms; /* @kind other */

  /* ---- Hairline / overlay ---- */
  --overlay-scrim:  rgba(13, 18, 56, 0.55);
}

/* ============================================================
   RAM Technologies — Base layer
   Resets + element defaults wired to the design tokens.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 0.5em;
}

p { margin: 0 0 1em; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre, kbd { font-family: var(--font-mono); }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-xs);
}

/* Utility: brand eyebrow / overline label */
.ram-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-brand);
}

/* Utility: gradient text in brand spectrum */
.ram-gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}