/* ============================================================
   Altrixz Design System — Colors & Type
   ============================================================
   The Porsche of digital development experiences.
   Voz: directos, ligeramente técnicos, con punto de vista.
   ============================================================ */

/* ---- Webfonts ----
   Body + Mono come from Google Fonts.
   Display = Rosnoc (the font of the ALTRIXZ wordmark — paid, commercial license).
   Drop the licensed file at fonts/rosnoc/Rosnoc.woff2 and the @font-face below
   will pick it up. Until then, the @font-face block silently fails and the
   stack falls back to Chakra Petch, which has the same geometric tech feel.
   ---------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Inter+Tight:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

@font-face {
  font-family: 'Rosnoc';
  src: url('fonts/rosnoc/Rosnoc.woff2') format('woff2'),
       url('fonts/rosnoc/Rosnoc.woff')  format('woff'),
       url('fonts/rosnoc/Rosnoc.otf')   format('opentype'),
       url('fonts/rosnoc/Rosnoc.ttf')   format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     COLOR — base
     ============================================================
     The system runs on a dark stage. Red is the only chromatic
     voice — it does not share the spotlight. Greys do the
     structural work; red is reserved for the moments that earn it.
     ============================================================ */

  /* Brand red — the only saturated color in the system */
  --red-100: #ffe4e7;
  --red-200: #ffb3bb;
  --red-300: #ff6976;
  --red-400: #f43547;
  --red-500: #e2061c;   /* PRIMARY — the Altrixz red */
  --red-600: #c20419;
  --red-700: #970313;
  --red-800: #6b020d;
  --red-900: #3d0107;

  /* Ink — the dark stage */
  --ink-0:   #ffffff;
  --ink-50:  #f5f5f6;
  --ink-100: #e7e7e9;
  --ink-200: #c5c5ca;
  --ink-300: #8e8e96;
  --ink-400: #5a5a62;
  --ink-500: #3a3a40;
  --ink-600: #25252a;
  --ink-700: #18181c;
  --ink-800: #101013;
  --ink-900: #08080a;   /* near-black, the canvas */
  --ink-950: #000000;

  /* Semantic surfaces (dark mode is the default) */
  --bg:           var(--ink-900);
  --bg-elevated:  var(--ink-800);
  --bg-sunken:    var(--ink-950);
  --surface:      var(--ink-800);
  --surface-2:    var(--ink-700);
  --surface-3:    var(--ink-600);

  /* Foreground / text */
  --fg:           var(--ink-50);   /* primary text */
  --fg-1:         var(--ink-50);
  --fg-2:         var(--ink-200);  /* secondary */
  --fg-3:         var(--ink-300);  /* tertiary, captions */
  --fg-4:         var(--ink-400);  /* muted, disabled */
  --fg-inverse:   var(--ink-900);

  /* Accent + state */
  --accent:       var(--red-500);
  --accent-hover: var(--red-400);
  --accent-press: var(--red-600);
  --accent-soft:  rgba(226, 6, 28, 0.12);
  --accent-ring:  rgba(226, 6, 28, 0.35);

  /* Lines + dividers */
  --line-1: rgba(255, 255, 255, 0.06);   /* hairline */
  --line-2: rgba(255, 255, 255, 0.10);   /* default */
  --line-3: rgba(255, 255, 255, 0.18);   /* prominent */
  --line-red: rgba(226, 6, 28, 0.45);    /* accent border */

  /* Status (used sparingly — diagnostic feedback only) */
  --ok:    #2ecc71;
  --warn:  #f5a524;
  --crit:  var(--red-500);

  /* ============================================================
     TYPE — base
     ============================================================
     Display: Chakra Petch — geometric, tech, with the curved
       interior softness of the ALTRIXZ wordmark. Used for
       headlines, statements, and section starters.
     Body: Inter Tight — neutral, premium, sets a calm stage
       under the loud display.
     Mono: JetBrains Mono — for numbers, code, technical labels,
       and anything that wants the "diagnostic" voice.
     ============================================================ */

  --font-display: 'Rosnoc', 'Chakra Petch', 'Eurostile', 'Bank Gothic', system-ui, sans-serif;
  --font-sans:    'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;

  /* Weights */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semi:     600;
  --w-bold:     700;

  /* Type scale — modular, slightly compressed for density */
  --t-2xs:  0.6875rem;   /* 11 — micro labels */
  --t-xs:   0.75rem;     /* 12 — eyebrow, caption */
  --t-sm:   0.8125rem;   /* 13 — fine print */
  --t-base: 0.9375rem;   /* 15 — body */
  --t-md:   1rem;        /* 16 — body large */
  --t-lg:   1.125rem;    /* 18 — lead */
  --t-xl:   1.375rem;    /* 22 — h4 */
  --t-2xl:  1.75rem;     /* 28 — h3 */
  --t-3xl:  2.25rem;     /* 36 — h2 */
  --t-4xl:  3rem;        /* 48 — h1 */
  --t-5xl:  4rem;        /* 64 — display */
  --t-6xl:  5.5rem;      /* 88 — hero display */

  /* Line heights */
  --lh-tight: 0.95;
  --lh-snug:  1.1;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  /* Letter-spacing */
  --ls-tight:  -0.02em;
  --ls-snug:   -0.01em;
  --ls-base:   0;
  --ls-wide:   0.04em;
  --ls-wider:  0.08em;
  --ls-widest: 0.18em;   /* for ALL CAPS micro-eyebrows */

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --s-0:   0;
  --s-1:   0.25rem;   /* 4  */
  --s-2:   0.5rem;    /* 8  */
  --s-3:   0.75rem;   /* 12 */
  --s-4:   1rem;      /* 16 */
  --s-5:   1.5rem;    /* 24 */
  --s-6:   2rem;      /* 32 */
  --s-7:   3rem;      /* 48 */
  --s-8:   4rem;      /* 64 */
  --s-9:   6rem;      /* 96 */
  --s-10:  8rem;      /* 128 */

  /* ============================================================
     RADII — minimal. Altrixz is precise, not rounded.
     ============================================================ */
  --r-0:   0;
  --r-1:   2px;
  --r-2:   4px;        /* default — small elements */
  --r-3:   8px;        /* cards, inputs */
  --r-4:   12px;       /* large cards */
  --r-5:   16px;
  --r-pill: 999px;

  /* ============================================================
     SHADOWS — restrained. Most depth comes from contrast,
     not soft blooms. Two flavors: structural (lift) and accent
     (red glow, used on hover/focus only).
     ============================================================ */
  --shadow-1: 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.45);
  --shadow-3: 0 1px 0 0 rgba(255,255,255,0.06) inset, 0 24px 60px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 0 1px rgba(226, 6, 28,0.5), 0 0 32px rgba(226, 6, 28,0.25);
  --shadow-ring: 0 0 0 3px rgba(226, 6, 28,0.25);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0, 1, 0.45);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--accent);
}

.t-display {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: var(--t-4xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg-1);
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: var(--t-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg-1);
}

.t-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--t-2xl);
  line-height: 1.2;
  letter-spacing: var(--ls-snug);
  color: var(--fg-1);
}

.t-h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-semi);
  font-size: var(--t-xl);
  line-height: 1.25;
  letter-spacing: var(--ls-base);
  color: var(--fg-1);
}

.t-lead {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--t-lg);
  line-height: var(--lh-base);
  color: var(--fg-2);
}

.t-body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  color: var(--fg-2);
}

.t-caption {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--t-xs);
  line-height: 1.4;
  color: var(--fg-3);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: 0;
  color: var(--fg-2);
}

.t-code {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: var(--r-2);
  color: var(--fg-1);
  border: 1px solid var(--line-2);
}

.t-quote {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--t-2xl);
  line-height: 1.3;
  letter-spacing: var(--ls-snug);
  color: var(--fg-1);
}

/* ============================================================
   GLOBAL DEFAULTS
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font: var(--w-semi) var(--t-4xl)/var(--lh-snug) var(--font-display); letter-spacing: var(--ls-snug); }
h2 { font: var(--w-semi) var(--t-3xl)/var(--lh-snug) var(--font-display); letter-spacing: var(--ls-snug); }
h3 { font: var(--w-medium) var(--t-2xl)/1.2 var(--font-display); letter-spacing: var(--ls-snug); }
h4 { font: var(--w-semi) var(--t-xl)/1.25 var(--font-sans); }

p { color: var(--fg-2); }
a { color: var(--fg-1); text-decoration: none; border-bottom: 1px solid var(--line-red); transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--accent); }

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

::selection { background: var(--accent); color: var(--ink-0); }