/* ============================================================
   ARCO EDUCAÇÃO — Design Tokens
   colors_and_type.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* NOTE: Plus Jakarta Sans is a Google Fonts substitute for Arco's
   actual brand typeface. Request original font files from client
   for pixel-perfect fidelity. */

/* ── BASE COLOR PALETTE ── */
:root {
  /* Brand Colors */
  --color-navy:        #0C0C18;   /* Deep navy — primary dark bg */
  --color-navy-800:    #16162A;   /* Slightly lighter navy */
  --color-navy-700:    #1E1E36;   /* Card on dark bg */
  --color-orange:      #E96F2B;   /* Arco orange — primary accent */
  --color-orange-600:  #C9521A;   /* Darker orange — hover state */
  --color-orange-100:  #FDE9D8;   /* Light orange — tint */
  --color-blue:        #2356B8;   /* Arco blue — secondary accent */
  --color-blue-600:    #1A409A;   /* Darker blue — hover */
  --color-blue-100:    #D6E2FA;   /* Light blue — tint */

  /* Neutral Scale */
  --color-white:       #FFFFFF;
  --color-off-white:   #F5F4EF;   /* Warm cream — light section bg */
  --color-gray-100:    #EFEFEC;   /* Dividers, subtle bg */
  --color-gray-200:    #DDDDD8;   /* Borders */
  --color-gray-400:    #9999AA;   /* Disabled, placeholder */
  --color-gray-600:    #5A5A6E;   /* Secondary/muted text */
  --color-gray-800:    #2E2E3E;   /* Secondary dark text */
  --color-black:       #0A0A14;   /* True black with blue tint */

  /* ── SEMANTIC COLOR TOKENS ── */
  --color-bg-primary:    var(--color-off-white);
  --color-bg-dark:       var(--color-navy);
  --color-bg-card:       var(--color-white);
  --color-bg-card-dark:  var(--color-navy-700);

  --color-text-primary:  var(--color-navy);
  --color-text-secondary: var(--color-gray-600);
  --color-text-on-dark:  var(--color-white);
  --color-text-muted:    var(--color-gray-400);

  --color-accent:        var(--color-orange);
  --color-accent-hover:  var(--color-orange-600);
  --color-accent-2:      var(--color-blue);
  --color-accent-2-hover: var(--color-blue-600);

  --color-border:        var(--color-gray-200);
  --color-border-subtle: var(--color-gray-100);

  --color-card-orange-bg:  #F4E2D4;
  --color-card-blue-bg:    #D2DFFF;
  --color-card-dark-bg:    var(--color-navy);

  /* ── TYPOGRAPHY ── */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Fira Code', 'Cascadia Code', 'Courier New', monospace;

  /* Font Sizes */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  3.75rem;   /* 60px */
  --text-7xl:  4.5rem;    /* 72px */
  --text-8xl:  6rem;      /* 96px */
  --text-hero: 7.5rem;    /* 120px */

  /* Font Weights */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Line Heights */
  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Letter Spacing */
  --tracking-tight:  -0.03em;
  --tracking-normal: 0em;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.12em;

  /* ── SPACING SCALE ── */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* Section padding */
  --section-padding-y:  var(--space-20);
  --section-padding-x:  var(--space-8);
  --container-max:      1280px;
  --container-wide:     1440px;

  /* ── BORDER RADIUS ── */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   20px;
  --radius-xl:   24px;
  --radius-pill: 100px;
  --radius-full: 9999px;

  /* ── SHADOWS & ELEVATION ── */
  --shadow-sm:   0 1px 3px rgba(12,12,24,0.08);
  --shadow-md:   0 4px 16px rgba(12,12,24,0.10);
  --shadow-lg:   0 8px 32px rgba(12,12,24,0.12);
  --shadow-card-orange: 0 8px 32px rgba(233,111,43,0.18);
  --shadow-card-blue:   0 8px 32px rgba(35,86,184,0.18);

  /* ── Z-INDEX SCALE ── */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
}

/* ── SEMANTIC TYPE STYLES ── */
.arco-display {
  font-family: var(--font-sans);
  font-size: var(--text-hero);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.arco-h1 {
  font-family: var(--font-sans);
  font-size: var(--text-7xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.arco-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.arco-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

.arco-h4 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

.arco-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.arco-body-lg {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.arco-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.arco-caption {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* ── BUTTON BASE ── */
.arco-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
  padding: 14px 32px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.arco-btn-primary {
  background: var(--color-orange);
  color: var(--color-white);
}
.arco-btn-primary:hover {
  background: var(--color-orange-600);
  transform: translateY(-1px);
}

.arco-btn-ghost {
  background: transparent;
  color: var(--color-white);
  border: 1.5px solid rgba(255,255,255,0.3);
}
.arco-btn-ghost:hover {
  background: rgba(255,255,255,0.08);
}

.arco-btn-outline {
  background: transparent;
  color: var(--color-navy);
  border: 1.5px solid var(--color-border);
}
.arco-btn-outline:hover {
  background: var(--color-gray-100);
}

/* ── SECTION LABEL ── */
.arco-section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

/* ── CONTAINER ── */
.arco-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-8);
}

/* ── CARD BASE ── */
.arco-card {
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
}

.arco-card-orange {
  background: var(--color-card-orange-bg);
}

.arco-card-blue {
  background: var(--color-card-blue-bg);
}

.arco-card-dark {
  background: var(--color-navy);
  color: var(--color-white);
}

.arco-card-white {
  background: var(--color-white);
  box-shadow: var(--shadow-md);
}