/* ============================================================
   MAGATEK — Colors & Type
   Core visual tokens for the MAGATEK brand and Easy Transport.
   ============================================================ */

/* Fonts — Rubik is used as the closest Google Font match to the
   wordmark's geometric, slightly-rounded, wide-aperture sans.
   Substitution flagged: no original TTF was supplied. */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------- BRAND GRADIENT ---------- */
  /* Sampled directly from the logo/wordmark.
     The brand is a single linear gradient from mint to pure blue. */
  --brand-0:  #00FFCC; /* mint — gradient start */
  --brand-1:  #00E0D4;
  --brand-2:  #00C2DB;
  --brand-3:  #00A5E0;
  --brand-4:  #0088E5;
  --brand-5:  #0066EB;
  --brand-6:  #0044F0;
  --brand-7:  #0022F8;
  --brand-8:  #0000FF; /* pure blue — gradient end */

  --brand-mint:  var(--brand-0);
  --brand-cyan:  #00BFD9;
  --brand-blue:  var(--brand-8);
  --brand-azure: #0073E8;

  /* ---------- EASY TRANSPORT (product sub-brand) ---------- */
  /* Sampled from the ET logo. Two dual-stop gradients form the "ET" mark:
     a deep→mid blue on the T, and a red-orange→red on the E bars. */
  --et-blue-deep:   #2D2C94;  /* T — left / top */
  --et-blue-mid:    #1B53A7;  /* T — middle */
  --et-blue-bright: #1069B7;  /* T — right */
  --et-red-bright:  #E94F20;  /* E bars — left (orange-red) */
  --et-red-deep:    #C62127;  /* E bars — right (deep red) */

  --et-gradient-blue: linear-gradient(90deg, #2D2C94 0%, #1B53A7 55%, #1069B7 100%);
  --et-gradient-red:  linear-gradient(90deg, #E94F20 0%, #D33327 55%, #C62127 100%);
  /* Full brand gradient — used very sparingly, only when both halves belong
     (e.g. a hero that intentionally mirrors the ET mark). */
  --et-gradient-duo:  linear-gradient(135deg, #E94F20 0%, #C62127 45%, #2D2C94 55%, #1069B7 100%);

  /* ---------- EASY TRANSPORT AI — PRESCRIPTION CATEGORIES ----------
     Six prescription types used across extraction + detail + chat + search.
     Each gets a hue, a soft background, and a strong foreground. Hues are
     chosen to be mutually distinguishable *and* to sit next to the ET blue
     without visual clash. Use the -soft token as badge bg, -strong as text
     and icon color, -ring for focus/hover rings. */

  /* LimitePeso — heavy, grounded: slate-iron */
  --rx-peso-strong: #4A5468;
  --rx-peso-soft:   #EEF1F6;
  --rx-peso-ring:   rgba(74, 84, 104, 0.18);

  /* LimiteSagoma — dimensional, calibrated: teal */
  --rx-sagoma-strong: #0E7C84;
  --rx-sagoma-soft:   #E0F7F7;
  --rx-sagoma-ring:   rgba(14, 124, 132, 0.18);

  /* ObbligoScorta — authority, uniform: ET deep blue */
  --rx-scorta-strong: #2D2C94;
  --rx-scorta-soft:   #E4E5F5;
  --rx-scorta-ring:   rgba(45, 44, 148, 0.18);

  /* VincoloOrario — clock, night: amber */
  --rx-orario-strong: #B45309;
  --rx-orario-soft:   #FEF3DF;
  --rx-orario-ring:   rgba(180, 83, 9, 0.18);

  /* VincoloPercorso — route, warning: ET red */
  --rx-percorso-strong: #C62127;
  --rx-percorso-soft:   #FCE3E4;
  --rx-percorso-ring:   rgba(198, 33, 39, 0.18);

  /* Altro — catch-all: neutral plum */
  --rx-altro-strong: #6B4E93;
  --rx-altro-soft:   #F0EBF7;
  --rx-altro-ring:   rgba(107, 78, 147, 0.18);

  /* The canonical brand gradient. Use as backgrounds, fills, strokes. */
  --brand-gradient:         linear-gradient(90deg, #00FFCC 0%, #00BFD9 30%, #0073E8 60%, #0000FF 100%);
  --brand-gradient-diag:    linear-gradient(135deg, #00FFCC 0%, #00BFD9 30%, #0073E8 60%, #0000FF 100%);
  --brand-gradient-vertical: linear-gradient(180deg, #00FFCC 0%, #00BFD9 30%, #0073E8 60%, #0000FF 100%);
  --brand-gradient-text:    linear-gradient(90deg, #00FFCC 0%, #00BFD9 35%, #0066EB 70%, #0000FF 100%);

  /* ---------- NEUTRALS ---------- */
  /* Cool-leaning neutrals; subtly tinted toward the brand blue. */
  --neutral-0:  #FFFFFF;
  --neutral-50: #F6F8FB;
  --neutral-100:#ECF0F5;
  --neutral-200:#DCE2EB;
  --neutral-300:#B9C2D1;
  --neutral-400:#8A95A8;
  --neutral-500:#5C6779;
  --neutral-600:#3E4757;
  --neutral-700:#2A3140;
  --neutral-800:#1A1F2B;
  --neutral-900:#0E121B;
  --neutral-950:#06080E;

  /* ---------- SURFACES (light theme default) ---------- */
  --bg-page:     var(--neutral-50);
  --bg-surface:  var(--neutral-0);
  --bg-raised:   var(--neutral-0);
  --bg-sunken:   var(--neutral-100);
  --bg-inverse:  var(--neutral-900);

  /* On-gradient / on-dark scrims. Used sparingly. */
  --bg-deep:     #06103A; /* deep navy used behind hero gradients */
  --bg-deepest:  #030820;

  /* ---------- FOREGROUND ---------- */
  --fg-1: var(--neutral-900);  /* primary text */
  --fg-2: var(--neutral-600);  /* body/secondary */
  --fg-3: var(--neutral-400);  /* tertiary, placeholder */
  --fg-4: var(--neutral-300);  /* disabled */
  --fg-on-brand: #FFFFFF;      /* text placed on the gradient */
  --fg-on-dark:  #FFFFFF;

  /* ---------- BORDERS ---------- */
  --border-subtle:   color-mix(in oklab, var(--neutral-300), transparent 50%);
  --border-default:  var(--neutral-200);
  --border-strong:   var(--neutral-300);
  --border-focus:    var(--brand-azure);

  /* ---------- SEMANTIC ---------- */
  --success:       #12B886;
  --success-soft:  #E3FAF2;
  --warning:       #F59F00;
  --warning-soft:  #FFF5E0;
  --danger:        #E53935;
  --danger-soft:   #FDECEC;
  --info:          var(--brand-azure);
  --info-soft:     #E5F0FF;

  /* ---------- TYPOGRAPHY FAMILIES ---------- */
  --font-display:   'Rubik', 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:      'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SCALE ---------- */
  /* Major third-ish, geared toward a tech/SaaS feel. */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.125rem;  /* 18 */
  --fs-lg:   1.25rem;   /* 20 */
  --fs-xl:   1.5rem;    /* 24 */
  --fs-2xl:  2rem;      /* 32 */
  --fs-3xl:  2.5rem;    /* 40 */
  --fs-4xl:  3.25rem;   /* 52 */
  --fs-5xl:  4.25rem;   /* 68 */
  --fs-6xl:  5.5rem;    /* 88 */

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

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

  /* ---------- RADII ---------- */
  /* MAGATEK favors a modern, generously rounded radii, echoing the rounded
     terminals and dot-nodes in the logo. */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs:  0 1px 2px rgba(14, 18, 27, 0.06);
  --shadow-sm:  0 2px 6px rgba(14, 18, 27, 0.06), 0 1px 2px rgba(14, 18, 27, 0.04);
  --shadow-md:  0 6px 16px rgba(14, 18, 27, 0.08), 0 2px 4px rgba(14, 18, 27, 0.04);
  --shadow-lg:  0 16px 40px rgba(14, 18, 27, 0.10), 0 4px 8px rgba(14, 18, 27, 0.04);
  --shadow-xl:  0 32px 72px rgba(14, 18, 27, 0.14), 0 8px 16px rgba(14, 18, 27, 0.06);
  --shadow-glow: 0 10px 30px -6px rgba(0, 115, 232, 0.4), 0 4px 12px -2px rgba(0, 255, 204, 0.25);
  --shadow-ring-focus: 0 0 0 3px rgba(0, 115, 232, 0.28);
  --shadow-inset-field: inset 0 1px 2px rgba(14, 18, 27, 0.06);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.55, 0, 0.75, 0);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
  --dur-slower: 500ms;

  /* ---------- LAYOUT ---------- */
  --container-max: 1200px;
  --container-wide: 1320px;
  --hairline: 1px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply directly or via @extend-like utility classes.
   ============================================================ */

html { color-scheme: light; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  margin: 0;
}

p, .p {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
  margin: 0;
}

.lead {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-azure);
}

.caption, small {
  font-size: var(--fs-sm);
  color: var(--fg-3);
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* Gradient text treatment — use sparingly on key words only. */
.gradient-text {
  background: var(--brand-gradient-text);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Selection */
::selection {
  background: color-mix(in oklab, var(--brand-mint), transparent 60%);
  color: var(--fg-1);
}

/* Focus ring default */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-ring-focus);
  border-radius: var(--radius-sm);
}