/* ============================================
   Concord Preparatory School — Design System
   ============================================
   Version: 1.0.0
   Purpose: Global design tokens, modern reset,
            utility classes, and component base styles.
   Usage:   <link rel="stylesheet" href="/Styles/css/design-system.css">
   Note:    All utility/component classes use the .cp- prefix
            to avoid conflicts with existing Pintuer styles.
   ============================================ */


/* ============================================
   1. FONTS & COMPONENTS (Imported Styles)
   ============================================ */
@import 'fonts.css';
@import 'components/global-interactive.css';
@import 'components/header.css';
@import 'components/footer.css';
@import 'components/rich-text.css';

/* ============================================
   2. DESIGN TOKENS (CSS Custom Properties)
   ============================================ */

:root {
    /* ---- Brand Colors (VI 规范 v1.0) ---- */
    /* Primary: Pantone 18-4222TCX Bluesteel */
    --cp-color-primary: #34627B;
    --cp-color-primary-dark: #285068;
    --cp-color-primary-light: #4F7F97;
    --cp-color-primary-50: rgba(52, 98, 123, 0.08);
    --cp-color-primary-100: rgba(52, 98, 123, 0.15);

    /* Secondary: Pantone 549 C */
    --cp-color-secondary: #6DA6BB;
    --cp-color-secondary-dark: #568695;
    --cp-color-secondary-light: #8BBFCE;

    /* Accent: Pantone 116 CP */
    --cp-color-accent: #F4CD2C;
    --cp-color-accent-dark: #C8A520;
    --cp-color-accent-light: #F7D95E;

    /* ---- Neutral Colors ---- */
    --cp-color-white: #ffffff;
    --cp-color-gray-50: #f8f9fa;
    --cp-color-gray-100: #f0f1f3;
    --cp-color-gray-200: #e2e4e7;
    --cp-color-gray-300: #cdd0d5;
    --cp-color-gray-400: #9ea3ab;
    --cp-color-gray-500: #6e6e6e;
    --cp-color-gray-600: #555555;
    --cp-color-gray-700: #333333;
    --cp-color-gray-800: #1f1f1f;
    --cp-color-gray-900: #141414;
    --cp-color-black: #000000;

    /* ---- Semantic Colors ---- */
    --cp-color-success: #2e7d32;
    --cp-color-warning: #ed6c02;
    --cp-color-error: #d32f2f;
    --cp-color-info: #0288d1;

    /* ---- Typography (VI 规范：英文 OPPOSans，中文思源黑体/Noto Sans SC) ---- */
    --cp-font-heading: "OPPOSans", "Helvetica Neue", Arial, sans-serif;
    --cp-font-body: "OPPOSans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --cp-font-mono: "SF Mono", "Fira Code", "Consolas", monospace;

    /* ---- Font Sizes (rem-based, 1rem = 16px) ---- */
    --cp-text-xs: 0.75rem;
    /* 12px */
    --cp-text-sm: 0.875rem;
    /* 14px */
    --cp-text-base: 1rem;
    /* 16px */
    --cp-text-lg: 1.125rem;
    /* 18px */
    --cp-text-xl: 1.25rem;
    /* 20px */
    --cp-text-2xl: 1.5rem;
    /* 24px */
    --cp-text-3xl: 1.875rem;
    /* 30px */
    --cp-text-4xl: 2.25rem;
    /* 36px */
    --cp-text-5xl: 3rem;
    /* 48px */
    --cp-text-6xl: 3.75rem;
    /* 60px */

    /* ---- Font Weights ---- */
    --cp-font-light: 300;
    --cp-font-regular: 400;
    --cp-font-medium: 500;
    --cp-font-semibold: 600;
    --cp-font-bold: 700;

    /* ---- Line Heights ---- */
    --cp-leading-none: 1;
    --cp-leading-tight: 1.25;
    --cp-leading-snug: 1.375;
    --cp-leading-normal: 1.5;
    --cp-leading-relaxed: 1.625;
    --cp-leading-loose: 2;

    /* ---- Letter Spacing ---- */
    --cp-tracking-tight: -0.025em;
    --cp-tracking-normal: 0;
    --cp-tracking-wide: 0.025em;
    --cp-tracking-wider: 0.05em;
    --cp-tracking-widest: 0.1em;

    /* ---- Spacing Scale ---- */
    --cp-space-0: 0;
    --cp-space-px: 1px;
    --cp-space-0\.5: 0.125rem;
    /* 2px  */
    --cp-space-1: 0.25rem;
    /* 4px  */
    --cp-space-1\.5: 0.375rem;
    /* 6px  */
    --cp-space-2: 0.5rem;
    /* 8px  */
    --cp-space-3: 0.75rem;
    /* 12px */
    --cp-space-4: 1rem;
    /* 16px */
    --cp-space-5: 1.25rem;
    /* 20px */
    --cp-space-6: 1.5rem;
    /* 24px */
    --cp-space-8: 2rem;
    /* 32px */
    --cp-space-10: 2.5rem;
    /* 40px */
    --cp-space-12: 3rem;
    /* 48px */
    --cp-space-16: 4rem;
    /* 64px */
    --cp-space-20: 5rem;
    /* 80px */
    --cp-space-24: 6rem;
    /* 96px */

    /* ---- Border Radius ---- */
    --cp-radius-none: 0;
    --cp-radius-sm: 4px;
    --cp-radius-md: 8px;
    --cp-radius-lg: 12px;
    --cp-radius-xl: 16px;
    --cp-radius-2xl: 24px;
    --cp-radius-full: 9999px;

    /* ---- Box Shadows ---- */
    --cp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --cp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --cp-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04);
    --cp-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.07), 0 4px 6px rgba(0, 0, 0, 0.04);
    --cp-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.08), 0 8px 10px rgba(0, 0, 0, 0.04);
    --cp-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);
    --cp-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);

    /* ---- Transitions ---- */
    --cp-transition-fast: 150ms ease;
    --cp-transition-base: 250ms ease;
    --cp-transition-slow: 400ms ease;
    --cp-transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ---- Z-index Scale ---- */
    --cp-z-dropdown: 100;
    --cp-z-sticky: 200;
    --cp-z-fixed: 300;
    --cp-z-overlay: 400;
    --cp-z-modal: 500;
    --cp-z-popover: 600;
    --cp-z-tooltip: 700;

    /* ---- Layout ---- */
    --cp-max-width: 1500px;
    --cp-max-width-narrow: 900px;
    --cp-max-width-wide: 1800px;
    --cp-header-height: 70px;
    --cp-sidebar-width: 280px;

    /* ---- Breakpoints (for reference, used in media queries) ----
     --cp-bp-sm: 640px;
     --cp-bp-md: 768px;
     --cp-bp-lg: 1024px;
     --cp-bp-xl: 1280px;
     --cp-bp-2xl: 1536px;
  */
}


/* ============================================
   2. LIGHTWEIGHT RESET
   (Scoped additions only — doesn't override Pintuer)
   ============================================ */

/* Smooth scrolling for anchor jumps */
html {
    scroll-behavior: smooth;
}

/* Improved image defaults */
img.cp-img,
.cp-content img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Better focus visibility for accessibility */
:focus-visible {
    outline: 2px solid var(--cp-color-primary);
    outline-offset: 2px;
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ============================================
   3. TYPOGRAPHY CLASSES
   ============================================ */

/* Headings — use these for new content */
.cp-h1 {
    font-family: var(--cp-font-heading);
    font-size: var(--cp-text-5xl);
    font-weight: var(--cp-font-bold);
    line-height: var(--cp-leading-tight);
    letter-spacing: var(--cp-tracking-tight);
    color: var(--cp-color-gray-900);
}

.cp-h2 {
    font-family: var(--cp-font-heading);
    font-size: var(--cp-text-4xl);
    font-weight: var(--cp-font-bold);
    line-height: var(--cp-leading-tight);
    color: var(--cp-color-gray-900);
}

.cp-h3 {
    font-family: var(--cp-font-heading);
    font-size: var(--cp-text-3xl);
    font-weight: var(--cp-font-semibold);
    line-height: var(--cp-leading-snug);
    color: var(--cp-color-gray-900);
}

.cp-h4 {
    font-family: var(--cp-font-heading);
    font-size: var(--cp-text-2xl);
    font-weight: var(--cp-font-semibold);
    line-height: var(--cp-leading-snug);
    color: var(--cp-color-gray-900);
}

.cp-h5 {
    font-family: var(--cp-font-heading);
    font-size: var(--cp-text-xl);
    font-weight: var(--cp-font-medium);
    line-height: var(--cp-leading-normal);
    color: var(--cp-color-gray-700);
}

.cp-h6 {
    font-family: var(--cp-font-heading);
    font-size: var(--cp-text-lg);
    font-weight: var(--cp-font-medium);
    line-height: var(--cp-leading-normal);
    color: var(--cp-color-gray-700);
}

/* Body text */
.cp-body {
    font-family: var(--cp-font-body);
    font-size: var(--cp-text-base);
    line-height: var(--cp-leading-relaxed);
    color: var(--cp-color-gray-700);
}

.cp-body-sm {
    font-family: var(--cp-font-body);
    font-size: var(--cp-text-sm);
    line-height: var(--cp-leading-normal);
    color: var(--cp-color-gray-500);
}

.cp-body-lg {
    font-family: var(--cp-font-body);
    font-size: var(--cp-text-lg);
    line-height: var(--cp-leading-relaxed);
    color: var(--cp-color-gray-700);
}

/* Caption / overline */
.cp-caption {
    font-family: var(--cp-font-body);
    font-size: var(--cp-text-xs);
    font-weight: var(--cp-font-medium);
    letter-spacing: var(--cp-tracking-wider);
    text-transform: uppercase;
    color: var(--cp-color-gray-500);
}


/* ============================================
   4. LAYOUT UTILITIES
   ============================================ */

/* Container */
.cp-container {
    width: 100%;
    max-width: var(--cp-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--cp-space-4);
    padding-right: var(--cp-space-4);
}

.cp-container-narrow {
    max-width: var(--cp-max-width-narrow);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--cp-space-4);
    padding-right: var(--cp-space-4);
}

/* CSS Grid layout */
.cp-grid {
    display: grid;
    gap: var(--cp-space-6);
}

.cp-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.cp-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.cp-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Responsive grid — collapses to 1 column on small screens */
@media (max-width: 768px) {

    .cp-grid-2,
    .cp-grid-3,
    .cp-grid-4 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .cp-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .cp-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Flexbox helpers */
.cp-flex {
    display: flex;
}

.cp-flex-col {
    display: flex;
    flex-direction: column;
}

.cp-flex-wrap {
    flex-wrap: wrap;
}

.cp-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cp-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cp-flex-start {
    display: flex;
    align-items: flex-start;
}

.cp-flex-end {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.cp-items-center {
    align-items: center;
}

.cp-items-start {
    align-items: flex-start;
}

.cp-justify-center {
    justify-content: center;
}

.cp-justify-between {
    justify-content: space-between;
}

.cp-flex-1 {
    flex: 1;
}

.cp-flex-none {
    flex: none;
}

/* Gap */
.cp-gap-2 {
    gap: var(--cp-space-2);
}

.cp-gap-3 {
    gap: var(--cp-space-3);
}

.cp-gap-4 {
    gap: var(--cp-space-4);
}

.cp-gap-6 {
    gap: var(--cp-space-6);
}

.cp-gap-8 {
    gap: var(--cp-space-8);
}


/* ============================================
   5. SPACING UTILITIES
   ============================================ */

/* Margin */
.cp-m-0 {
    margin: 0;
}

.cp-m-auto {
    margin: auto;
}

.cp-mt-4 {
    margin-top: var(--cp-space-4);
}

.cp-mt-6 {
    margin-top: var(--cp-space-6);
}

.cp-mt-8 {
    margin-top: var(--cp-space-8);
}

.cp-mt-12 {
    margin-top: var(--cp-space-12);
}

.cp-mb-2 {
    margin-bottom: var(--cp-space-2);
}

.cp-mb-4 {
    margin-bottom: var(--cp-space-4);
}

.cp-mb-6 {
    margin-bottom: var(--cp-space-6);
}

.cp-mb-8 {
    margin-bottom: var(--cp-space-8);
}

.cp-mb-12 {
    margin-bottom: var(--cp-space-12);
}

.cp-mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* Padding */
.cp-p-0 {
    padding: 0;
}

.cp-p-4 {
    padding: var(--cp-space-4);
}

.cp-p-6 {
    padding: var(--cp-space-6);
}

.cp-p-8 {
    padding: var(--cp-space-8);
}

.cp-px-4 {
    padding-left: var(--cp-space-4);
    padding-right: var(--cp-space-4);
}

.cp-px-6 {
    padding-left: var(--cp-space-6);
    padding-right: var(--cp-space-6);
}

.cp-py-4 {
    padding-top: var(--cp-space-4);
    padding-bottom: var(--cp-space-4);
}

.cp-py-8 {
    padding-top: var(--cp-space-8);
    padding-bottom: var(--cp-space-8);
}

.cp-py-12 {
    padding-top: var(--cp-space-12);
    padding-bottom: var(--cp-space-12);
}

.cp-py-16 {
    padding-top: var(--cp-space-16);
    padding-bottom: var(--cp-space-16);
}

.cp-py-20 {
    padding-top: var(--cp-space-20);
    padding-bottom: var(--cp-space-20);
}


/* ============================================
   6. TEXT UTILITIES
   ============================================ */

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

.cp-text-left {
    text-align: left;
}

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

.cp-text-uppercase {
    text-transform: uppercase;
}

.cp-text-capitalize {
    text-transform: capitalize;
}

.cp-text-nowrap {
    white-space: nowrap;
}

.cp-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-text-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

.cp-text-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    overflow: hidden;
}

/* Text colors */
.cp-text-primary {
    color: var(--cp-color-primary);
}

.cp-text-secondary {
    color: var(--cp-color-secondary);
}

.cp-text-accent {
    color: var(--cp-color-accent);
}

.cp-text-white {
    color: var(--cp-color-white);
}

.cp-text-muted {
    color: var(--cp-color-gray-500);
}

.cp-text-dark {
    color: var(--cp-color-gray-900);
}


/* ============================================
   7. BACKGROUND & BORDER UTILITIES
   ============================================ */

.cp-bg-primary {
    background-color: var(--cp-color-primary);
}

.cp-bg-secondary {
    background-color: var(--cp-color-secondary);
}

.cp-bg-accent {
    background-color: var(--cp-color-accent);
}

.cp-bg-white {
    background-color: var(--cp-color-white);
}

.cp-bg-gray-50 {
    background-color: var(--cp-color-gray-50);
}

.cp-bg-gray-100 {
    background-color: var(--cp-color-gray-100);
}

.cp-rounded {
    border-radius: var(--cp-radius-md);
}

.cp-rounded-sm {
    border-radius: var(--cp-radius-sm);
}

.cp-rounded-lg {
    border-radius: var(--cp-radius-lg);
}

.cp-rounded-full {
    border-radius: var(--cp-radius-full);
}

.cp-shadow {
    box-shadow: var(--cp-shadow-md);
}

.cp-shadow-sm {
    box-shadow: var(--cp-shadow-sm);
}

.cp-shadow-lg {
    box-shadow: var(--cp-shadow-lg);
}

.cp-shadow-none {
    box-shadow: none;
}


/* ============================================
   8. DISPLAY & VISIBILITY UTILITIES
   ============================================ */

.cp-block {
    display: block;
}

.cp-inline-block {
    display: inline-block;
}

.cp-hidden {
    display: none;
}

.cp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cp-relative {
    position: relative;
}

.cp-absolute {
    position: absolute;
}

.cp-sticky {
    position: sticky;
}

.cp-w-full {
    width: 100%;
}

.cp-h-full {
    height: 100%;
}

.cp-overflow-hidden {
    overflow: hidden;
}


/* ============================================
   9. COMPONENT: BUTTONS
   ============================================ */

.cp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cp-space-2);
    padding: var(--cp-space-3) var(--cp-space-6);
    font-family: var(--cp-font-heading);
    font-size: var(--cp-text-sm);
    font-weight: var(--cp-font-semibold);
    line-height: 1;
    letter-spacing: var(--cp-tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--cp-radius-sm);
    cursor: pointer;
    transition: all var(--cp-transition-base);
    -webkit-appearance: none;
    appearance: none;
}

.cp-btn:focus-visible {
    outline: 2px solid var(--cp-color-primary);
    outline-offset: 2px;
}

.cp-btn:disabled,
.cp-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary button */
.cp-btn-primary {
    background-color: var(--cp-color-primary);
    color: var(--cp-color-white);
    border-color: var(--cp-color-primary);
}

.cp-btn-primary:hover {
    background-color: var(--cp-color-primary-dark);
    border-color: var(--cp-color-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--cp-shadow-md);
}

/* Secondary / outline button */
.cp-btn-outline {
    background-color: transparent;
    color: var(--cp-color-primary);
    border-color: var(--cp-color-primary);
}

.cp-btn-outline:hover {
    background-color: var(--cp-color-primary);
    color: var(--cp-color-white);
    transform: translateY(-1px);
}

/* White button (for dark backgrounds) */
.cp-btn-white {
    background-color: var(--cp-color-white);
    color: var(--cp-color-primary);
    border-color: var(--cp-color-white);
}

.cp-btn-white:hover {
    background-color: var(--cp-color-gray-100);
    border-color: var(--cp-color-gray-100);
}

/* Ghost button */
.cp-btn-ghost {
    background-color: transparent;
    color: var(--cp-color-white);
    border-color: var(--cp-color-white);
}

.cp-btn-ghost:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* Size variants */
.cp-btn-sm {
    padding: var(--cp-space-2) var(--cp-space-4);
    font-size: var(--cp-text-xs);
}

.cp-btn-lg {
    padding: var(--cp-space-4) var(--cp-space-8);
    font-size: var(--cp-text-base);
}


/* ============================================
   10. COMPONENT: CARDS
   ============================================ */

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

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

.cp-card-body {
    padding: var(--cp-space-6);
}

.cp-card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.cp-card-title {
    font-family: var(--cp-font-heading);
    font-size: var(--cp-text-xl);
    font-weight: var(--cp-font-semibold);
    color: var(--cp-color-gray-900);
    margin-bottom: var(--cp-space-2);
}

.cp-card-text {
    font-family: var(--cp-font-body);
    font-size: var(--cp-text-sm);
    line-height: var(--cp-leading-relaxed);
    color: var(--cp-color-gray-500);
}


/* ============================================
   11. COMPONENT: SECTIONS
   ============================================ */

.cp-section {
    padding-top: var(--cp-space-16);
    padding-bottom: var(--cp-space-16);
}

.cp-section-sm {
    padding-top: var(--cp-space-8);
    padding-bottom: var(--cp-space-8);
}

.cp-section-lg {
    padding-top: var(--cp-space-24);
    padding-bottom: var(--cp-space-24);
}

/* Section title with underline accent */
.cp-section-title {
    font-family: var(--cp-font-heading);
    font-size: var(--cp-text-3xl);
    font-weight: var(--cp-font-bold);
    color: var(--cp-color-gray-900);
    margin-bottom: var(--cp-space-4);
    position: relative;
    padding-bottom: var(--cp-space-4);
}

.cp-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: var(--cp-color-accent);
}

.cp-section-title-center {
    text-align: center;
}

.cp-section-title-center::after {
    left: 50%;
    transform: translateX(-50%);
}

.cp-section-subtitle {
    font-family: var(--cp-font-body);
    font-size: var(--cp-text-lg);
    line-height: var(--cp-leading-relaxed);
    color: var(--cp-color-gray-500);
    max-width: 680px;
}

.cp-section-title-center+.cp-section-subtitle {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}


/* ============================================
   12. COMPONENT: LINKS
   ============================================ */

.cp-link {
    color: var(--cp-color-primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--cp-transition-fast), color var(--cp-transition-fast);
}

.cp-link:hover {
    color: var(--cp-color-primary-dark);
    border-bottom-color: var(--cp-color-primary-dark);
}

/* Arrow link (CTA style) */
.cp-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--cp-space-2);
    font-family: var(--cp-font-heading);
    font-size: var(--cp-text-sm);
    font-weight: var(--cp-font-semibold);
    letter-spacing: var(--cp-tracking-wide);
    text-transform: uppercase;
    color: var(--cp-color-primary);
    text-decoration: none;
    transition: gap var(--cp-transition-base), color var(--cp-transition-fast);
}

.cp-link-arrow::after {
    content: '→';
    transition: transform var(--cp-transition-base);
}

.cp-link-arrow:hover {
    color: var(--cp-color-primary-dark);
    gap: var(--cp-space-3);
}

.cp-link-arrow:hover::after {
    transform: translateX(2px);
}


/* ============================================
   13. COMPONENT: DIVIDERS
   ============================================ */

.cp-divider {
    border: none;
    height: 1px;
    background-color: var(--cp-color-gray-200);
    margin: var(--cp-space-8) 0;
}

.cp-divider-accent {
    height: 3px;
    width: 40px;
    background-color: var(--cp-color-accent);
    border: none;
}


/* ============================================
   14. COMPONENT: FORM ELEMENTS
   ============================================ */

.cp-input,
.cp-textarea,
.cp-select {
    width: 100%;
    padding: var(--cp-space-3) var(--cp-space-4);
    font-family: var(--cp-font-body);
    font-size: var(--cp-text-base);
    line-height: var(--cp-leading-normal);
    color: var(--cp-color-gray-700);
    background-color: var(--cp-color-white);
    border: 1px solid var(--cp-color-gray-300);
    border-radius: var(--cp-radius-sm);
    transition: border-color var(--cp-transition-fast), box-shadow var(--cp-transition-fast);
    -webkit-appearance: none;
    appearance: none;
}

.cp-input:focus,
.cp-textarea:focus,
.cp-select:focus {
    border-color: var(--cp-color-primary);
    box-shadow: 0 0 0 3px var(--cp-color-primary-50);
    outline: none;
}

.cp-input::placeholder,
.cp-textarea::placeholder {
    color: var(--cp-color-gray-400);
}

.cp-textarea {
    min-height: 120px;
    resize: vertical;
}

.cp-label {
    display: block;
    font-family: var(--cp-font-body);
    font-size: var(--cp-text-sm);
    font-weight: var(--cp-font-medium);
    color: var(--cp-color-gray-700);
    margin-bottom: var(--cp-space-2);
}

.cp-form-group {
    margin-bottom: var(--cp-space-6);
}


/* ============================================
   15. TRANSITION & ANIMATION UTILITIES
   ============================================ */

.cp-transition {
    transition: all var(--cp-transition-base);
}

.cp-hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--cp-shadow-lg);
}

.cp-hover-scale:hover {
    transform: scale(1.02);
}

/* Fade-in animation for elements entering viewport */
@keyframes cp-fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cp-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cp-animate-in {
    animation: cp-fadeIn 0.5s ease forwards;
}

.cp-animate-in-up {
    animation: cp-fadeInUp 0.6s ease forwards;
}


/* ============================================
   16. RESPONSIVE VISIBILITY
   ============================================ */

@media (max-width: 768px) {
    .cp-hide-mobile {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .cp-hide-desktop {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .cp-hide-tablet {
        display: none !important;
    }
}

@import 'components/header.css';
@import 'components/footer.css';