/* ======================================================
   CDS GLOBAL DESIGN SYSTEM
   Master Theme File
   Font: Rubic
====================================================== */

/* ================================
   1. GOOGLE FONT
================================ */

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


/* ================================
   2. ROOT DESIGN TOKENS
================================ */

:root {

  /* ================= Typography ================= */

  --font-primary: "Rubik", sans-serif;
  --font-heading: "Rubik", sans-serif;

  --fs-hero: 72px;
  --fs-h1: 52px;
  --fs-h2: 40px;
  --fs-h3: 30px;
  --fs-h4: 22px;
  --fs-body-lg: 20px;
  --fs-body: 18px;
  --fs-body-sm: 16px;
  --fs-small: 14px;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --line-height-tight: 1.2;
  --line-height-base: 1.75;

  /* ================= Brand Colors ================= */

  --cds-primary: #F4A100;        /* CDS Gold */
  --cds-primary-dark: #D48C00;

  --cds-maroon: #A83E4C;
  --cds-maroon-dark: #7C2D38;

  --cds-dark: #1A1A1A;
  --cds-body: #4A4A4A;
  --cds-muted: #777777;

  --cds-bg-light: #F8F8F8;
  --cds-bg-cream: #FAF7F3;
  --cds-white: #FFFFFF;

  --cds-border: rgba(0,0,0,0.08);

  /* ================= Layout ================= */

  --container-width: 1320px;
  --container-padding: 20px;

  /* Section Spacing Scale (STRICT) */
  --space-xs: 60px;
  --space-sm: 80px;
  --space-md: 120px;
  --space-lg: 160px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Shadow */
  --shadow-soft: 0 10px 30px rgba(0,0,0,0.05);

  /* Transition */
  --transition: all .3s ease;

}



/* ================================
   3. GLOBAL RESET
================================ */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--line-height-base);
  color: var(--cds-body);
  background: var(--cds-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}



/* ================================
   4. TYPOGRAPHY SYSTEM
================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--cds-dark);
  line-height: var(--line-height-tight);
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-extrabold); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }

p {
  margin-bottom: 20px;
}

.lead-text {
  font-size: var(--fs-body-lg);
  color: var(--cds-dark);
  font-weight: var(--fw-medium);
}



/* ================================
   5. CONTAINER & SECTION SYSTEM
================================ */

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.section {
  padding: var(--space-md) 0;
}

.section-lg {
  padding: var(--space-lg) 0;
}

.section-sm {
  padding: var(--space-sm) 0;
}

.section-xs {
  padding: var(--space-xs) 0;
}

.section-light {
  background: var(--cds-bg-light);
}

.section-cream {
  background: var(--cds-bg-cream);
}



/* ================================
   6. SECTION TITLE SYSTEM
   (Extracted from layout.css)
================================ */

.section-header {
  max-width: 850px;
  margin-bottom: 60px;
}

.section-eyebrow {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: var(--fw-semibold);
  color: var(--cds-maroon);
  margin-bottom: 12px;
}

.section-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--cds-dark);
  margin-bottom: 20px;
}

.section-title span {
  color: var(--cds-primary);
}

.section-subtext {
  font-size: var(--fs-body);
  color: var(--cds-body);
}



/* ================================
   7. GRID SYSTEM
================================ */

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.col {
  padding-left: 15px;
  padding-right: 15px;
  flex: 1;
}

.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }



/* ================================
   8. BUTTON SYSTEM
================================ */

.btn {
  display: inline-block;
  padding: 14px 32px;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
  border: none;
}

.btn-primary {
  background: linear-gradient(90deg, var(--cds-maroon), var(--cds-primary));
  color: var(--cds-white);
}

.btn-primary:hover {
  transform: translateY(-3px);
  opacity: 0.95;
}

.btn-outline {
  border: 2px solid var(--cds-primary);
  color: var(--cds-primary);
  background: transparent;
}

.btn-outline:hover {
  background: var(--cds-primary);
  color: var(--cds-white);
}



/* ================================
   9. CARD BASE SYSTEM
================================ */

.card {
  background: var(--cds-white);
  border-radius: var(--radius-lg);
  padding: 40px;
  border: 1px solid var(--cds-border);
  transition: var(--transition);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-soft);
}



/* ================================
   10. UTILITY CLASSES
================================ */

.text-center { text-align: center; }
.text-right { text-align: right; }

.mt-40 { margin-top: 40px; }
.mt-60 { margin-top: 60px; }
.mt-80 { margin-top: 80px; }

.mb-40 { margin-bottom: 40px; }
.mb-60 { margin-bottom: 60px; }
.mb-80 { margin-bottom: 80px; }




.theme-btn,
button.theme-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 36px;
background:linear-gradient(90deg,#ffc107,#f57c00);
color:#ffffff;
font-size:16px;
font-weight:600;
border-radius:40px;
text-decoration:none;
border:none;
cursor:pointer;
transition:all .3s ease;
box-shadow:0 6px 18px rgba(0,0,0,0.12);
}

.theme-btn:hover,
button.theme-btn:hover{
transform:translateY(-3px);
box-shadow:0 14px 32px rgba(0,0,0,0.18);
}


/* ================================
   11. RESPONSIVE SYSTEM
================================ */

@media (max-width: 1200px) {
  :root {
    --fs-h1: 44px;
    --fs-h2: 34px;
  }
}

@media (max-width: 992px) {

  .col-6,
  .col-4,
  .col-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .section {
    padding: var(--space-sm) 0;
  }

}

@media (max-width: 576px) {

  :root {
    --fs-h1: 32px;
    --fs-h2: 26px;
    --fs-h3: 22px;
  }

  body {
    font-size: var(--fs-body-sm);
  }

}