/* ==========================================================================
   UnboundPrint Design System v2
   design-system-v2.css
   --------------------------------------------------------------------------
   Tokens and utility classes only. No page-specific layout rules.
   Base unit: 4px
   Breakpoints: sm 480px | md 768px | lg 1024px | xl 1280px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GOOGLE FONT IMPORT
   -------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Rammetto+One&family=Mulish:wght@300;400;600;700&display=swap');


/* --------------------------------------------------------------------------
   2. DESIGN TOKENS  (CSS custom properties on :root)
   -------------------------------------------------------------------------- */

:root {

  /* --- 2.1 Color palette ------------------------------------------------- */

  /* Core brand colors */
  --ub-magenta:        #CE2984;   /* Primary action, energy */
  --ub-bright-blue:    #00AAFF;   /* Accent, highlights */
  --ub-cyan:           #00B4D8;   /* Secondary, support */
  --ub-navy:           #00293D;   /* Text, dark surfaces */
  --ub-white:          #FFFFFF;

  /* Derived / surface colors */
  --ub-magenta-dark:   #a82070;   /* Hover / pressed state for magenta */
  --ub-cyan-dark:      #0099BB;   /* Hover / pressed state for cyan */
  --ub-navy-light:     #00446a;   /* Lighter navy for hover fills, borders */
  --ub-surface-alt:    #F0F4F8;   /* Light gray-blue tinted alternate section bg */

  /* Semantic text tokens */
  --ub-text-primary:   #00293D;   /* Maps to navy -- main body text */
  --ub-text-muted:     #6B7A99;   /* Subdued labels, captions */

  /* Brand greys — blue-tinted, progressively darker */
  --ub-grey-light:     #E5E9F0;   /* Soft neutral, backgrounds, subtle borders */
  --ub-grey-medium:    #CBD1DC;   /* Mid-tone dividers, disabled states */
  --ub-grey-dark:      #B0B8C6;   /* Strongest visible grey, emphasised borders */

  /* Border */
  --ub-border:         #D6DCE8;   /* Subtle dividers, input borders */

  /* Shadow */
  --ub-shadow-card:    0 1px 8px rgba(0,41,61,0.06);  /* Subtle card elevation */


  /* --- 2.2 Spacing scale (base unit = 4px) -------------------------------- */
  --ub-space-1:   4px;
  --ub-space-2:   8px;
  --ub-space-3:   12px;
  --ub-space-4:   16px;
  --ub-space-5:   20px;
  --ub-space-6:   24px;
  --ub-space-8:   32px;
  --ub-space-10:  40px;
  --ub-space-12:  48px;
  --ub-space-16:  64px;


  /* --- 2.3 Type scale ----------------------------------------------------- */
  --ub-text-xs:   0.75rem;    /* 12px */
  --ub-text-sm:   0.875rem;   /* 14px */
  --ub-text-base: 1rem;       /* 16px */
  --ub-text-lg:   1.125rem;   /* 18px */
  --ub-text-xl:   1.25rem;    /* 20px */
  --ub-text-2xl:  1.5rem;     /* 24px */
  --ub-text-3xl:  1.875rem;   /* 30px */
  --ub-text-4xl:  2.25rem;    /* 36px */
  --ub-text-5xl:  3rem;       /* 48px */


  /* --- 2.4 Font weights --------------------------------------------------- */
  --ub-weight-regular: 400;
  --ub-weight-medium:  500;
  --ub-weight-bold:    700;
  --ub-weight-black:   900;


  /* --- 2.5 Border radius -------------------------------------------------- */
  --ub-radius-sm:   4px;
  --ub-radius-md:   8px;
  --ub-radius-lg:   16px;
  --ub-radius-full: 9999px;


  /* --- 2.5b Breakpoints --------------------------------------------------
     Canonical site-wide breakpoints. CSS media queries cannot reference
     custom properties, so these vars are informational; the *actual* values
     below (480/768/1024/1280) are what all @media rules must use.

       mobile  : < 480px     (phones, portrait)
       sm      : 480–767px   (large phones / small tablets)
       md      : 768–1023px  (tablets)
       lg      : 1024–1279px (desktop)
       xl      : ≥ 1280px    (wide desktop)

     Usage in CSS:
       @media (max-width: 479.98px)  { ... mobile only ... }
       @media (max-width: 767.98px)  { ... mobile + sm ... }
       @media (max-width: 1023.98px) { ... mobile + sm + md (anything narrower than desktop) ... }
       @media (min-width: 1024px)    { ... desktop and up ... }
  */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;


  /* --- 2.6 Shadows -------------------------------------------------------- */
  --ub-shadow-sm:  0 1px 3px 0 rgba(27, 42, 74, 0.08),
                   0 1px 2px -1px rgba(27, 42, 74, 0.06);
  --ub-shadow-md:  0 4px 12px 0 rgba(27, 42, 74, 0.12),
                   0 2px 4px -1px rgba(27, 42, 74, 0.08);
  --ub-shadow-lg:  0 12px 32px 0 rgba(27, 42, 74, 0.16),
                   0 4px 8px -2px rgba(27, 42, 74, 0.10);


  /* --- 2.7 Transitions ---------------------------------------------------- */
  --ub-transition: 0.2s ease;

}


/* --------------------------------------------------------------------------
   3. BASE / RESET HELPERS
   -------------------------------------------------------------------------- */

/* Apply box-sizing consistently within design system containers */
.ub-container *,
.ub-container *::before,
.ub-container *::after {
  box-sizing: border-box;
}


/* --------------------------------------------------------------------------
   4. TYPOGRAPHY UTILITIES
   -------------------------------------------------------------------------- */

/*
   Headings use Rammetto One (display font) with tight line-height.
   Falls back to a generic cursive/sans stack if the font fails to load.
*/

.ub-heading-1,
.ub-heading-2,
.ub-heading-3,
.ub-heading-4 {
  font-family: 'Rammetto One', cursive, system-ui, sans-serif;
  font-weight: var(--ub-weight-regular); /* Rammetto One is a display face -- weight built in */
  color: var(--ub-text-primary);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}

.ub-heading-1 {
  font-size: var(--ub-text-4xl);   /* 36px mobile */
  line-height: 1.1;
}

.ub-heading-2 {
  font-size: var(--ub-text-3xl);   /* 30px mobile */
  line-height: 1.15;
}

.ub-heading-3 {
  font-size: var(--ub-text-2xl);   /* 24px */
  line-height: 1.2;
}

.ub-heading-4 {
  font-size: var(--ub-text-xl);    /* 20px */
  line-height: 1.2;
}

/* Responsive heading scale -- upsize on larger viewports */
@media (min-width: 768px) {
  .ub-heading-1 { font-size: var(--ub-text-5xl); }   /* 48px */
  .ub-heading-2 { font-size: var(--ub-text-4xl); }   /* 36px */
  .ub-heading-3 { font-size: var(--ub-text-3xl); }   /* 30px */
  .ub-heading-4 { font-size: var(--ub-text-2xl); }   /* 24px */
}


/* --------------------------------------------------------------------------
   5. COLOR TEXT UTILITIES
   -------------------------------------------------------------------------- */

.ub-text-magenta { color: var(--ub-magenta); }
.ub-text-cyan    { color: var(--ub-cyan); }
.ub-text-navy    { color: var(--ub-navy); }
.ub-text-muted   { color: var(--ub-text-muted); }


/* --------------------------------------------------------------------------
   6. BUTTON SYSTEM
   -------------------------------------------------------------------------- */

/*
   Design rules:
   - Padding:       12px 28px (vertical / horizontal)
   - Border-radius: full (pill shape -- youthful, energetic)
   - Font-weight:   700
   - Uppercase text with 0.5px letter-spacing
   - Min-height:    44px (touch target accessibility)
   - Transition:    via --ub-transition
*/

/* 6.1 Base button reset -- combine with a variant class */
.ub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ub-space-2);

  padding: 12px 28px;
  min-height: 44px;

  font-family: system-ui, -apple-system, sans-serif;
  font-size: var(--ub-text-sm);
  font-weight: var(--ub-weight-bold);
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;

  border: 2px solid transparent;
  border-radius: var(--ub-radius-full);
  cursor: pointer;
  outline-offset: 2px;

  transition: background-color var(--ub-transition),
              border-color var(--ub-transition),
              color var(--ub-transition),
              box-shadow var(--ub-transition),
              transform var(--ub-transition);

  -webkit-appearance: none;
  appearance: none;
  user-select: none;
}

.ub-btn:focus-visible {
  outline: 3px solid var(--ub-magenta);
  outline-offset: 3px;
}

.ub-btn:active {
  transform: translateY(1px);
}

/* Disabled state -- applies to any variant */
.ub-btn:disabled,
.ub-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}


/* 6.2 Primary -- magenta fill */
.ub-btn-primary {
  background-color: var(--ub-magenta);
  border-color: var(--ub-magenta);
  color: var(--ub-white);
}

.ub-btn-primary:hover,
.ub-btn-primary:focus-visible {
  background-color: var(--ub-magenta-dark);
  border-color: var(--ub-magenta-dark);
  color: var(--ub-white);
}


/* 6.3 Secondary -- cyan fill */
.ub-btn-secondary {
  background-color: var(--ub-cyan);
  border-color: var(--ub-cyan);
  color: var(--ub-white);
}

.ub-btn-secondary:hover,
.ub-btn-secondary:focus-visible {
  background-color: var(--ub-cyan-dark);
  border-color: var(--ub-cyan-dark);
  color: var(--ub-white);
}


/* 6.4 Outline -- navy border and text; hover fills navy */
.ub-btn-outline {
  background-color: transparent;
  border-color: var(--ub-navy);
  color: var(--ub-navy);
}

.ub-btn-outline:hover,
.ub-btn-outline:focus-visible {
  background-color: var(--ub-navy);
  border-color: var(--ub-navy);
  color: var(--ub-white);
}


/* --------------------------------------------------------------------------
   7. BADGE SYSTEM
   -------------------------------------------------------------------------- */

/*
   Small pill label -- used for "NEW", "SALE", category tags, etc.
*/

.ub-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 3px 10px;
  min-height: 22px;

  font-family: system-ui, -apple-system, sans-serif;
  font-size: var(--ub-text-xs);
  font-weight: var(--ub-weight-bold);
  line-height: 1;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;

  border-radius: var(--ub-radius-full);
}

/* Badge color variants */
.ub-badge-magenta {
  background-color: var(--ub-magenta);
  color: var(--ub-white);
}

.ub-badge-cyan {
  background-color: var(--ub-cyan);
  color: var(--ub-white);
}

.ub-badge-navy {
  background-color: var(--ub-navy);
  color: var(--ub-white);
}


/* --------------------------------------------------------------------------
   8. LAYOUT UTILITIES
   -------------------------------------------------------------------------- */

/* 8.1 Container -- max 1280px, centered, with responsive horizontal padding */
.ub-container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--ub-space-4);   /* 16px on mobile */
}

@media (min-width: 480px) {
  .ub-container {
    padding-inline: var(--ub-space-6);  /* 24px */
  }
}

@media (min-width: 1024px) {
  .ub-container {
    padding-inline: var(--ub-space-8);  /* 32px */
  }
}


/* 8.2 Section -- vertical rhythm; alternates white / surface-alt via modifier */
.ub-section {
  padding-block: var(--ub-space-12);   /* 48px on mobile */
  background-color: var(--ub-white);
}

@media (min-width: 768px) {
  .ub-section {
    padding-block: var(--ub-space-16); /* 64px on tablet and up */
  }
}

/* Alternate section background -- light gray-blue tint */
.ub-section.ub-surface-alt,
.ub-surface-alt {
  background-color: var(--ub-surface-alt);
}


/* --------------------------------------------------------------------------
   9. CARD UTILITY
   -------------------------------------------------------------------------- */

/*
   Reusable card shell -- white bg, shadow-sm, radius-md.
   Hover elevates shadow and lifts card slightly.
*/

.ub-card {
  background-color: var(--ub-white);
  border-radius: var(--ub-radius-md);
  box-shadow: var(--ub-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--ub-transition),
              transform var(--ub-transition);
}

.ub-card:hover {
  box-shadow: var(--ub-shadow-md);
  transform: translateY(-2px);
}


/* --------------------------------------------------------------------------
   10. HERO ACCENT GRADIENTS
   -------------------------------------------------------------------------- */

/*
   Subtle decorative gradients for hero backgrounds only.
   Default brand treatment is solid color; use these sparingly for
   hero panels and large feature sections.
*/

/* Magenta-to-navy -- primary hero */
.ub-hero-accent {
  background: linear-gradient(
    135deg,
    var(--ub-magenta) 0%,
    #C4177A 40%,
    var(--ub-navy) 100%
  );
}

/* Cyan-to-navy -- secondary hero / feature panels */
.ub-hero-accent-cyan {
  background: linear-gradient(
    135deg,
    var(--ub-cyan) 0%,
    var(--ub-navy) 100%
  );
}


/* --------------------------------------------------------------------------
   END OF DESIGN SYSTEM
   -------------------------------------------------------------------------- */