/* Visum Design System: fontes e tokens (self-hosted) */
@font-face{font-family:'Switzer';src:url('/assets/fonts/Switzer-Variable.woff2') format('woff2-variations'),url('/assets/fonts/Switzer-Variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer Static';src:url('/assets/fonts/Switzer-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-latin-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-latin-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-latin-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-latin-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ===========================================================================
   VISUM — Colors
   Brand: Violet. Accent: Electric Yellow. Neutral: cool grey ramp.
   Base scales (raw) + semantic aliases (use the semantic ones in product code).
   =========================================================================== */

:root {
  /* ---- Brand: Visum Violet ------------------------------------------------ */
  --violet-50:   #F4F1FF;
  --violet-100:  #ECE7FF;   /* crystal / light surface */
  --violet-200:  #DCD3FF;
  --violet-300:  #C1AFFF;
  --violet-400:  #A481FF;
  --violet-500:  #884FFF;   /* base action */
  --violet-600:  #7B2BFC;   /* PRIMARY — hover/active, highlights */
  --violet-700:  #7120E9;   /* logo violet */
  --violet-800:  #5A14C3;
  --violet-900:  #4C139F;
  --violet-1000: #2D096C;   /* deepest — gradient anchor */

  /* ---- Accent: Visum Yellow (sparing — AI / emphasis) --------------------- */
  --yellow-100: #F5FBC6;
  --yellow-200: #EEF791;
  --yellow-300: #EAF24A;
  --yellow-400: #ECED22;   /* electric */
  --yellow-500: #DDD515;
  --yellow-600: #987C10;

  /* ---- Neutral: cool grey ramp ------------------------------------------- */
  --white:     #FFFFFF;
  --grey-50:   #FAFAFA;
  --grey-75:   #F8F8FC;
  --grey-100:  #F3F4F6;
  --grey-150:  #EBEBEB;
  --grey-200:  #E5E7EB;   /* default border */
  --grey-300:  #DBDBDB;
  --grey-400:  #94A3B8;
  --grey-500:  #808080;
  --grey-600:  #636363;
  --grey-700:  #475569;
  --grey-800:  #272727;
  --ink:       #080B12;   /* near-black — primary text */
  --black:     #000000;

  /* ---- Semantic status ---------------------------------------------------- */
  --success-500: #15BE78;
  --success-bg:  #ECFDF5;
  --success-fg:  #065F46;

  --danger-500:  #E61E32;
  --danger-bg:   #FEE2E2;
  --danger-fg:   #B42318;

  --warning-500: #F59E0B;
  --warning-bg:  #FFFBEB;
  --warning-fg:  #B45309;

  --info-500:    #3381FF;
  --info-bg:     #EFF6FF;
  --info-fg:     #1D4ED8;

  /* ---- Semantic aliases (prefer these) ------------------------------------ */
  --brand:            var(--violet-600);
  --brand-hover:      var(--violet-700);
  --brand-active:     var(--violet-800);
  --brand-soft:       var(--violet-100);
  --brand-on:         var(--white);

  --text-strong:      var(--ink);
  --text-body:        var(--grey-700);
  --text-muted:       var(--grey-600);
  --text-subtle:      var(--grey-400);
  --text-on-brand:    var(--white);

  --surface-page:     var(--grey-75);
  --surface-card:     var(--white);
  --surface-sunken:   var(--grey-100);
  --surface-brand:    var(--violet-600);

  --border-subtle:    var(--grey-200);
  --border-strong:    var(--grey-300);
  --border-brand:     var(--violet-300);

  /* ---- Brand gradient (highlight blocks / 3D imagery overlays) ------------ */
  --gradient-brand: linear-gradient(135deg, #18053A 0%, #4C1D95 50%, #7B2BFC 100%); /* @kind other */
  --gradient-ink:   linear-gradient(135deg, #18053A, var(--violet-500)); /* @kind other */
}

/* ===========================================================================
   VISUM — Typography  (Mise type ramp)
   Display + Heading  →  Switzer (tight tracking, weight 500)
   Paragraph + Label  →  Inter   (generous line-height for data/long-form)
   =========================================================================== */

:root {
  --font-display: 'Switzer', 'Switzer Static', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Weights */
  --fw-extralight: 200; /* @kind font */
  --fw-light:      300; /* @kind font */
  --fw-regular:    400; /* @kind font */
  --fw-medium:     500; /* @kind font */
  --fw-semibold:   600; /* @kind font */
  --fw-bold:       700; /* @kind font */

  /* Tracking */
  --track-tight:  -0.02em; /* @kind font */
  --track-snug:   -0.01em; /* @kind font */
  --track-normal:  0; /* @kind font */
  --track-wide:    0.05em; /* @kind font */

  /* ---- Display (Switzer, weight 500, tracking -0.01em, lh 1.2) ----------- */
  --display-lg:  96px;   /* hero numerals / statements */
  --display-md:  52px;
  --display-sm:  44px;
  --display-xs:  36px;

  /* ---- Heading (Switzer) -------------------------------------------------- */
  --h1: 56px;   /* lh 64 */
  --h2: 48px;   /* lh 56 */
  --h3: 40px;   /* lh 48 */
  --h4: 32px;   /* lh 40 */
  --h5: 24px;   /* lh 32 */
  --h6: 20px;   /* lh 28 */

  /* ---- Paragraph (Inter) -------------------------------------------------- */
  --p-lg:  18px;   /* lh 30 */
  --p-md:  16px;   /* lh 28 */
  --p-sm:  14px;   /* lh 22 */
  --p-xs:  12px;   /* lh 16 */
  --p-xxs: 10px;   /* lh 12 */

  /* ---- Label (Inter, medium) --------------------------------------------- */
  --label-md:  16px;   /* lh 24 */
  --label-sm:  14px;   /* lh 22 */
  --label-xs:  12px;   /* lh 16 */
  --label-xxs: 10px;   /* lh 14 */
}

/* ===========================================================================
   VISUM — Spacing, Radius, Shadow, Border, Motion
   8px-based spacing. Visum geometry rule: radii cap at 8px in dense product UI
   (cards/marketing can go to 12–24px). Soft, low-contrast shadows.
   =========================================================================== */

:root {
  /* ---- Spacing (8px base) ------------------------------------------------- */
  --space-0:  0;
  --space-2:  2px;
  --space-4:  4px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;

  /* ---- Radius ------------------------------------------------------------- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;    /* the Visum default — buttons, inputs, tiles */
  --radius-lg:   12px;   /* product cards */
  --radius-xl:   16px;   /* large surfaces */
  --radius-2xl:  24px;   /* marketing cards / hero frames */
  --radius-full: 9999px;

  /* ---- Shadow (soft, neutral) -------------------------------------------- */
  --shadow-xs: 0 1px 2px 0 rgba(8,11,18,0.05);
  --shadow-sm: 0 1px 2px 0 rgba(8,11,18,0.06), 0 1px 3px 0 rgba(8,11,18,0.04);
  --shadow-md: 0 4px 6px -1px rgba(8,11,18,0.08), 0 2px 4px -1px rgba(8,11,18,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(8,11,18,0.08), 0 4px 6px -2px rgba(8,11,18,0.04);
  --shadow-xl: 0 20px 40px -8px rgba(8,11,18,0.12), 0 8px 16px -8px rgba(8,11,18,0.06);
  --shadow-brand: 0 8px 24px -6px rgba(123,43,252,0.35);

  /* ---- Border ------------------------------------------------------------- */
  --border-width: 1px;
  --border:        1px solid var(--border-subtle); /* @kind other */
  --border-on-brand: 1px solid rgba(255,255,255,0.16); /* @kind other */

  /* ---- Focus ring --------------------------------------------------------- */
  --ring-brand: 0 0 0 3px rgba(123,43,252,0.30); /* @kind shadow */

  /* ---- Motion ------------------------------------------------------------- */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:    120ms; /* @kind other */
  --dur-base:    200ms; /* @kind other */
  --dur-slow:    400ms; /* @kind other */

  /* ---- Layout ------------------------------------------------------------- */
  --container: 1200px; /* @kind spacing */
}