/* ============================================================
   KLEVERSON PASSOS — Design System Foundation
   colors_and_type.css
   ============================================================ */

/* ── FONTS ── */
@font-face {
  font-family: 'GCNorthSans';
  src: url('fonts/GCNorthSans-Light.ttf') format('truetype');
  font-weight: 300;
}
@font-face {
  font-family: 'GCNorthSans';
  src: url('fonts/GCNorthSans-Regular.ttf') format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'GCNorthSans';
  src: url('fonts/GCNorthSans-Medium.ttf') format('truetype');
  font-weight: 500;
}
@font-face {
  font-family: 'GCNorthSans';
  src: url('fonts/GCNorthSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
}
@font-face {
  font-family: 'GCNorthSans';
  src: url('fonts/GCNorthSans-Bold.ttf') format('truetype');
  font-weight: 700;
}
@font-face {
  font-family: 'GCNorthSans';
  src: url('fonts/GCNorthSans-ExtraBold.ttf') format('truetype');
  font-weight: 800;
}

/* ── COLOR TOKENS ── */
:root {
  /* Core Palette */
  --kp-azul:      #152534;   /* Navy — primary background */
  --kp-azul-deep: #0d1a24;   /* Deeper navy for nested bg */
  --kp-azul-mid:  #1e3347;   /* Mid-navy for cards on azul */

  --kp-dourado:   #C3A377;   /* Gold — primary accent */
  --kp-dourado-light: #d4bc9a; /* Light gold for subtle use */
  --kp-dourado-dark:  #a8885e;  /* Dark gold for pressed states */

  --kp-claro:     #D2CCC1;   /* Warm cream — light text/surface */
  --kp-claro-deep:#b8b0a4;   /* Deeper cream for borders */

  --kp-cinza:     #38342F;   /* Dark charcoal */
  --kp-preto:     #0e0e0e;   /* Near black */
  --kp-branco:    #FAF8F5;   /* Warm white */

  /* Semantic Colors */
  --bg-primary:   var(--kp-azul);
  --bg-secondary: var(--kp-azul-deep);
  --bg-card:      var(--kp-azul-mid);
  --bg-light:     var(--kp-branco);

  --fg-primary:   var(--kp-branco);
  --fg-secondary: var(--kp-claro);
  --fg-muted:     var(--kp-claro-deep);
  --fg-on-light:  var(--kp-azul);

  --accent:       var(--kp-dourado);
  --accent-light: var(--kp-dourado-light);
  --accent-dark:  var(--kp-dourado-dark);
  --border:       rgba(195, 163, 119, 0.25);
  --border-subtle:rgba(210, 204, 193, 0.12);

  /* ── TYPE SCALE ── */
  --font-primary: 'GCNorthSans', 'Helvetica Neue', Helvetica, sans-serif;

  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-md:    1.125rem;   /* 18px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   2rem;       /* 32px */
  --text-3xl:   2.75rem;    /* 44px */
  --text-4xl:   3.5rem;     /* 56px */
  --text-5xl:   5rem;       /* 80px */

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  --tracking-wide:  0.08em;
  --tracking-wider: 0.15em;
  --tracking-tight: -0.02em;

  /* ── SPACING ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ── RADII ── */
  --radius-none: 0px;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* ── SHADOWS ── */
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.25);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.35);
  --shadow-lg:  0 12px 48px rgba(0,0,0,0.5);
  --shadow-gold: 0 4px 24px rgba(195,163,119,0.18);

  /* ── TRANSITIONS ── */
  --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:     cubic-bezier(0.0, 0.0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
}

/* ── SEMANTIC TYPE STYLES ── */
.kp-display {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.kp-h1 {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.kp-h2 {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.kp-h3 {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
}

.kp-h4 {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}

.kp-label {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.kp-body {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.kp-body-sm {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.kp-caption {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: var(--text-xs);
  line-height: var(--leading-loose);
  letter-spacing: var(--tracking-wide);
}

/* ── GOLD DIVIDER ── */
.kp-divider {
  width: 48px;
  height: 1px;
  background: var(--kp-dourado);
}

/* ── BUTTONS ── */
.kp-btn-primary {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  background: var(--kp-dourado);
  color: var(--kp-azul);
  border: none;
  padding: 14px 36px;
  border-radius: var(--radius-none);
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-default);
}
.kp-btn-primary:hover {
  background: var(--kp-dourado-dark);
}

.kp-btn-outline {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  background: transparent;
  color: var(--kp-dourado);
  border: 1px solid var(--kp-dourado);
  padding: 14px 36px;
  border-radius: var(--radius-none);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-default);
}
.kp-btn-outline:hover {
  background: var(--kp-dourado);
  color: var(--kp-azul);
}

.kp-btn-ghost {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  background: transparent;
  color: var(--kp-claro);
  border: none;
  padding: 10px 0;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: all var(--duration-base) var(--ease-default);
}
.kp-btn-ghost:hover {
  color: var(--kp-dourado);
  border-bottom-color: var(--kp-dourado);
}