/* ============================================================
   J.A UNIFORMES — Design Tokens
   colors_and_type.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

/* ── Base Color Palette ─────────────────────────────────── */
:root {
  --color-purple:        #6115DD;
  --color-purple-dark:   #3E1191;
  --color-purple-deeper: #2B1464;
  --color-purple-navy:   #282447;
  --color-purple-tint:   #EDE5FB;
  --color-yellow:        #FBB81B;

  --color-gray-dark:   #333333;
  --color-gray-mid:    #5F5C6B;
  --color-gray-muted:  #A9A7B5;
  --color-gray-light:  #F2F2F2;
  --color-gray-border: #e0e0e0;
  --color-white:       #FFFFFF;
  --color-black:       #111111;

  /* ── Semantic Colors ──────────────────────────────────── */
  --color-fg-primary:    var(--color-gray-dark);
  --color-fg-secondary:  var(--color-gray-mid);
  --color-fg-accent:     var(--color-purple);
  --color-fg-inverse:    var(--color-white);

  --color-bg-primary:    var(--color-white);
  --color-bg-secondary:  var(--color-gray-light);
  --color-bg-accent:     var(--color-purple);
  --color-bg-footer:     var(--color-purple-navy);

  --color-border:        var(--color-gray-border);

  /* ── Typography ───────────────────────────────────────── */
  --font-family:         'Montserrat', Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;
  --font-weight-extrabold: 800;

  /* ── Type Scale ───────────────────────────────────────── */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  60px;

  --line-height-tight:  1.2;
  --line-height-normal: 1.5;
  --line-height-loose:  1.75;

  /* ── Spacing (8px grid) ───────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;

  /* ── Border Radius ────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-pill: 20px;
  --radius-full: 9999px;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-card:  0px 4px 10px rgba(0, 0, 0, 0.10);
  --shadow-hover: 0px 8px 20px rgba(0, 0, 0, 0.15);
  --shadow-sm:    0px 2px 6px  rgba(0, 0, 0, 0.08);

  /* ── Transitions ──────────────────────────────────────── */
  --transition-fast:   all 0.15s ease;
  --transition-normal: all 0.25s ease;
  --transition-slow:   all 0.35s ease-in-out;

  /* ── Layout ───────────────────────────────────────────── */
  --max-width:       1200px;
  --nav-height:      70px;
  --section-padding: 72px;
}

/* ── Semantic Type Styles ─────────────────────────────────── */
h1, .h1 {
  font-family: var(--font-family);
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-purple);
}

h2, .h2 {
  font-family: var(--font-family);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-purple);
}

h3, .h3 {
  font-family: var(--font-family);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-gray-dark);
}

h4, .h4 {
  font-family: var(--font-family);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-dark);
}

p, .body {
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--color-fg-primary);
}

.caption, small {
  font-family: var(--font-family);
  font-size: var(--text-sm);
  color: var(--color-fg-secondary);
}

/* ── Utility Classes ──────────────────────────────────────── */
.text-purple  { color: var(--color-purple); }
.text-dark    { color: var(--color-gray-dark); }
.text-mid     { color: var(--color-gray-mid); }
.bg-purple    { background: var(--color-purple); }
.bg-light     { background: var(--color-gray-light); }
.bg-dark      { background: var(--color-purple-navy); }

/* ── Button Base ──────────────────────────────────────────── */
.btn {
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
  border-radius: var(--radius-pill);
  padding: 10px 25px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition-normal);
  display: inline-block;
  text-decoration: none;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.btn-primary {
  background: var(--color-purple);
  color: var(--color-white);
  border-color: var(--color-purple);
}
.btn-primary:hover {
  background: var(--color-purple-dark);
  border-color: var(--color-purple-dark);
}

.btn-secondary {
  background: var(--color-gray-mid);
  color: var(--color-white);
  border-color: var(--color-gray-mid);
}
.btn-secondary:hover {
  background: #7a7a7a;
  border-color: #7a7a7a;
}

.btn-outline {
  background: transparent;
  color: var(--color-purple);
  border-color: var(--color-purple);
}
.btn-outline:hover {
  background: var(--color-purple);
  color: var(--color-white);
}