/* Conecta'o Design System — Colors & Type Tokens */

/* Ubuntu — official brand font, served from local TTF files */
@font-face {
  font-family: 'Ubuntu';
  src: url('assets/fonts/Ubuntu-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ubuntu';
  src: url('assets/fonts/Ubuntu-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ubuntu';
  src: url('assets/fonts/Ubuntu-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ubuntu';
  src: url('assets/fonts/Ubuntu-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ubuntu';
  src: url('assets/fonts/Ubuntu-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ubuntu';
  src: url('assets/fonts/Ubuntu-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ========== BRAND COLORS ========== */
  /* Primary: deep navy — represents Swiss precision & trust */
  --co-navy: #1E325C;
  --co-navy-900: #0F1A30;
  --co-navy-700: #1E325C;
  --co-navy-500: #314A82;
  --co-navy-300: #6E83B7;
  --co-navy-100: #D6DCEA;
  --co-navy-50:  #EFF2F8;

  /* Secondary: signature red — the apostrophe accent (Caribbean energy + Italian vibrancy) */
  --co-red: #D11327;
  --co-red-900: #7A0B17;
  --co-red-700: #A50F1F;
  --co-red-500: #D11327;
  --co-red-300: #E76874;
  --co-red-100: #F8D2D6;
  --co-red-50:  #FCEBED;

  /* Tertiary: black + paper */
  --co-black: #000000;
  --co-ink:   #111418;
  --co-paper: #FFFFFF;

  /* Neutrals */
  --co-gray-900: #1A1D24;
  --co-gray-700: #4A5060;
  --co-gray-500: #8087A0;
  --co-gray-300: #C7CCDA;
  --co-gray-100: #ECEEF4;
  --co-gray-50:  #F7F8FB;
  --co-line:     #E3E6EE;

  /* Semantic foreground / background */
  --fg-1: var(--co-navy);          /* primary heading text */
  --fg-2: var(--co-gray-700);      /* body text */
  --fg-3: var(--co-gray-500);      /* meta / caption */
  --fg-accent: var(--co-red);      /* highlight word in headlines */
  --fg-on-dark: #FFFFFF;
  --bg-1: var(--co-paper);
  --bg-2: var(--co-gray-50);
  --bg-3: var(--co-gray-100);
  --bg-dark: var(--co-navy);
  --bg-darker: var(--co-navy-900);

  /* Status (semantic, kept on-brand) */
  --status-success: #1E8E5A;
  --status-warn:    #C77B05;
  --status-error:   var(--co-red);
  --status-info:    var(--co-navy);

  /* Sector accents — each division gets a tone-on-tone halo
     (the lockup itself is always navy + red). */
  --sector-real-estate: #1E325C;
  --sector-legal:       #1E325C;
  --sector-tech:        #314A82;
  --sector-ai:          #2D2350;
  --sector-luxury:      #C9A24A; /* gold accent reserved ONLY for Brand & Luxury */
  --sector-events:      #D11327;

  /* ========== TYPOGRAPHY ========== */
  --font-sans: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Ubuntu', system-ui, sans-serif;

  --fw-light: 300;    /* @kind font */
  --fw-regular: 400;  /* @kind font */
  --fw-medium: 500;   /* @kind font */
  --fw-bold: 700;     /* @kind font */

  /* Type scale (1.25 minor third) */
  --t-xs:   12px;
  --t-sm:   14px;
  --t-base: 16px;
  --t-md:   18px;
  --t-lg:   20px;
  --t-xl:   24px;
  --t-2xl:  32px;
  --t-3xl:  40px;
  --t-4xl:  56px;
  --t-5xl:  72px;
  --t-6xl:  96px;

  --lh-tight: 1.05;   /* @kind font */
  --lh-snug:  1.2;    /* @kind font */
  --lh-base:  1.5;    /* @kind font */
  --lh-loose: 1.7;    /* @kind font */

  /* ========== SPACING ========== */
  --sp-0: 0;   /* @kind spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ========== RADII ========== */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* ========== SHADOWS ========== */
  --shadow-xs: 0 1px 2px rgba(15, 26, 48, 0.06);
  --shadow-sm: 0 2px 6px rgba(15, 26, 48, 0.07);
  --shadow-md: 0 8px 20px rgba(15, 26, 48, 0.10);
  --shadow-lg: 0 18px 40px rgba(15, 26, 48, 0.14);
  --shadow-red: 0 8px 24px rgba(209, 19, 39, 0.20);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ========== MOTION ========== */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);     /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --dur-fast: 140ms;  /* @kind other */
  --dur-base: 220ms;  /* @kind other */
  --dur-slow: 380ms;  /* @kind other */
}

/* ========== SEMANTIC TYPE ========== */
.h-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(48px, 7vw, var(--t-6xl));
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--t-4xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--fg-1);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--t-3xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--t-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--t-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}
.subtitle {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--t-lg);
  line-height: var(--lh-base);
  color: var(--fg-2);
}
p, .body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  color: var(--fg-2);
}
.body-sm {
  font-size: var(--t-sm);
  line-height: var(--lh-base);
}
.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--t-xs);
  line-height: var(--lh-base);
  color: var(--fg-3);
}
code, .mono {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.95em;
  background: var(--co-navy-50);
  padding: 0.1em 0.35em;
  border-radius: var(--r-xs);
  color: var(--co-navy);
}

/* The signature: an accent word inside a headline */
.accent { color: var(--fg-accent); }
.accent-soft { color: var(--co-navy-500); }

/* The branded apostrophe (red comma-flag), reusable inline */
.apostrophe::after {
  content: "'";
  color: var(--co-red);
  font-weight: var(--fw-bold);
  margin-left: -0.05em;
}

/* Link */
a {
  color: var(--co-red);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--co-red-700); text-decoration: underline; text-underline-offset: 3px; }