/* ============================================================
   LA ISLA NETWORK — Colors, Type, & Tokens
   Namespace: --lin_
   Version: 1.0 · March 2026
   Font: Inter · Grid: 8px
   ============================================================ */

/* ── FONT FACES (local + Google Fonts fallback) ───────────── */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-VariableFont.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── BRAND BLUE (from logo chevrons #6399AF) ───────────── */
  --lin_blue-100:     #E8F1F5;   /* Background wash, hover tints */
  --lin_blue-300:     #A8C8D6;   /* Subtle accents, borders */
  --lin_blue-400:     #85B0C3;   /* Light accent, icons on dark */
  --lin_blue-500:     #6399AF;   /* Primary · logo · CTA · links */
  --lin_blue-600:     #4D7D93;   /* Hover */
  --lin_blue-700:     #3A6175;   /* Active / pressed */

  /* ── NAVY (dark UI base) ───────────────────────────────── */
  --lin_navy-600:     #3D4E60;
  --lin_navy-700:     #2E3A4A;
  --lin_navy-800:     #1A2330;   /* Header bg · primary dark */
  --lin_navy-900:     #0D0F10;   /* Near-black · footer */

  /* ── NEUTRALS ──────────────────────────────────────────── */
  --lin_grey-100:     #EEF1F3;
  --lin_grey-200:     #C5D0D6;
  --lin_grey-300:     #A0B0B8;
  --lin_grey-400:     #6B7D87;
  --lin_grey-500:     #3D4E56;

  /* ── TEXT ──────────────────────────────────────────────── */
  --lin_text-primary:   #1A2330;
  --lin_text-body:      #3D4E56;
  --lin_text-muted:     #6B7D87;
  --lin_text-inverse:   #FFFFFF;

  /* ── SURFACES ──────────────────────────────────────────── */
  --lin_surface-white:  #FFFFFF;
  --lin_surface-light:  #EEF1F3;
  --lin_surface-dark:   #2E3A4A;
  --lin_surface-navy:   #1A2330;

  /* ── SEMANTIC STATES ───────────────────────────────────── */
  --lin_focus:          #9CBECF;
  --lin_error:          #E8685A;
  --lin_success:        #7DDBB8;
  --lin_warning:        #F2C96A;

  /* ── CHART PALETTE (sequential order) ──────────────────── */
  --lin_chart-1:        #D6E4EC;
  --lin_chart-2:        #E8685A;
  --lin_chart-3:        #F2C96A;
  --lin_chart-4:        #7DDBB8;
  --lin_chart-5:        #3D4E60;
  --lin_chart-6:        #2A3545;
  --lin_chart-7:        #E0EBF0;

  /* ── LOGO-ONLY (do not use in UI) ──────────────────────── */
  --lin_logo-olive:     #606637;

  /* ── TYPOGRAPHY ────────────────────────────────────────── */
  --lin_font-family:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --lin_font-mono:     'SF Mono', 'Fira Code', ui-monospace, monospace;

  --lin_text-xs:    0.75rem;    /* 12 */
  --lin_text-sm:    0.875rem;   /* 14 */
  --lin_text-base:  1rem;       /* 16 */
  --lin_text-lg:    1.125rem;   /* 18 */
  --lin_text-xl:    1.25rem;    /* 20 */
  --lin_text-2xl:   1.5rem;     /* 24 */
  --lin_text-3xl:   1.875rem;   /* 30 */
  --lin_text-4xl:   2.25rem;    /* 36 */
  --lin_text-5xl:   3rem;       /* 48 */
  --lin_text-6xl:   3.75rem;    /* 60 */

  --lin_weight-light:    300;
  --lin_weight-regular:  400;
  --lin_weight-medium:   500;
  --lin_weight-semibold: 600;
  --lin_weight-bold:     700;

  --lin_leading-tight:   1.2;
  --lin_leading-snug:    1.35;
  --lin_leading-normal:  1.5;
  --lin_leading-relaxed: 1.65;

  --lin_tracking-tight:  -0.02em;
  --lin_tracking-normal:  0em;
  --lin_tracking-wide:    0.04em;
  --lin_tracking-widest:  0.1em;

  /* ── SPACING (8px grid) ────────────────────────────────── */
  --lin_space-1:   0.25rem;
  --lin_space-2:   0.5rem;
  --lin_space-3:   0.75rem;
  --lin_space-4:   1rem;
  --lin_space-5:   1.25rem;
  --lin_space-6:   1.5rem;
  --lin_space-8:   2rem;
  --lin_space-10:  2.5rem;
  --lin_space-12:  3rem;
  --lin_space-16:  4rem;
  --lin_space-20:  5rem;
  --lin_space-24:  6rem;

  /* ── BORDER RADIUS ─────────────────────────────────────── */
  --lin_radius-sm:   4px;
  --lin_radius-md:   8px;
  --lin_radius-lg:   12px;
  --lin_radius-xl:   16px;
  --lin_radius-full: 9999px;

  /* ── SHADOWS ───────────────────────────────────────────── */
  --lin_shadow-sm:  0 1px 3px rgba(30,50,65,0.08), 0 1px 2px rgba(30,50,65,0.06);
  --lin_shadow-md:  0 4px 12px rgba(30,50,65,0.10), 0 2px 4px rgba(30,50,65,0.06);
  --lin_shadow-lg:  0 12px 32px rgba(30,50,65,0.12), 0 4px 8px rgba(30,50,65,0.06);
  --lin_shadow-xl:  0 24px 48px rgba(30,50,65,0.16);

  /* ── BORDERS ───────────────────────────────────────────── */
  --lin_border-light:  1px solid #C5D0D6;
  --lin_border-medium: 1px solid #A8C8D6;
  --lin_border-dark:   1px solid #2E3A4A;

  /* ── TRANSITIONS ───────────────────────────────────────── */
  --lin_transition-fast:   150ms ease;
  --lin_transition-normal: 250ms ease;
  --lin_transition-slow:   400ms ease;

  /* ── LAYOUT ────────────────────────────────────────────── */
  --lin_container-sm:   640px;
  --lin_container-md:   768px;
  --lin_container-lg:   1024px;
  --lin_container-xl:   1280px;
  --lin_container-2xl:  1440px;

  /* ── SEMANTIC TYPE ROLES ───────────────────────────────── */
  --lin_fg-heading:     var(--lin_text-primary);
  --lin_fg-body:        var(--lin_text-body);
  --lin_fg-muted:       var(--lin_text-muted);
  --lin_fg-inverse:     var(--lin_text-inverse);
  --lin_fg-accent:      var(--lin_blue-500);
}

/* ── BASE ─────────────────────────────────────────────────── */
html, body {
  font-family: var(--lin_font-family);
  color: var(--lin_text-primary);
  background: var(--lin_surface-white);
  font-size: var(--lin_text-base);
  line-height: var(--lin_leading-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── SEMANTIC TYPE ─────────────────────────────────────────── */
.lin-overline {
  font-size: var(--lin_text-xs);
  font-weight: var(--lin_weight-semibold);
  letter-spacing: var(--lin_tracking-widest);
  text-transform: uppercase;
  color: var(--lin_blue-500);
}

.lin-display, h1.lin {
  font-size: var(--lin_text-5xl);
  font-weight: var(--lin_weight-bold);
  letter-spacing: var(--lin_tracking-tight);
  line-height: var(--lin_leading-tight);
  color: var(--lin_text-primary);
}
.lin-h1 {
  font-size: var(--lin_text-4xl);
  font-weight: var(--lin_weight-bold);
  letter-spacing: var(--lin_tracking-tight);
  line-height: var(--lin_leading-tight);
  color: var(--lin_text-primary);
}
.lin-h2 {
  font-size: var(--lin_text-3xl);
  font-weight: var(--lin_weight-semibold);
  letter-spacing: var(--lin_tracking-tight);
  line-height: var(--lin_leading-snug);
  color: var(--lin_text-primary);
}
.lin-h3 {
  font-size: var(--lin_text-2xl);
  font-weight: var(--lin_weight-semibold);
  line-height: var(--lin_leading-snug);
  color: var(--lin_text-primary);
}
.lin-h4 {
  font-size: var(--lin_text-xl);
  font-weight: var(--lin_weight-semibold);
  line-height: var(--lin_leading-snug);
  color: var(--lin_text-primary);
}
.lin-lead {
  font-size: var(--lin_text-lg);
  font-weight: var(--lin_weight-regular);
  line-height: var(--lin_leading-relaxed);
  color: var(--lin_text-body);
}
.lin-body {
  font-size: var(--lin_text-base);
  font-weight: var(--lin_weight-regular);
  line-height: var(--lin_leading-relaxed);
  color: var(--lin_text-body);
}
.lin-small {
  font-size: var(--lin_text-sm);
  line-height: var(--lin_leading-normal);
  color: var(--lin_text-muted);
}
.lin-caption {
  font-size: var(--lin_text-xs);
  color: var(--lin_text-muted);
}