/* ============================================================
   NOVITRIP DESIGN SYSTEM — Single Source of Truth
   ============================================================
   Import this file FIRST in every HTML page:
   <link rel="stylesheet" href="/public/css/design-system.css">
   
   Usage: var(--color-primary), var(--font-body), etc.
   ============================================================ */

:root {
    /* =========================
       COLORS — Brand
       ========================= */
    --color-primary:        #1e3a5f;    /* Navy — main brand, dark buttons, headers */
    --color-primary-hover:  #16304f;    /* Navy hover */
    --color-primary-light:  #2a4d78;    /* Navy lighter shade */

    --color-accent:         #28a745;    /* Green — CTA buttons, success states */
    --color-accent-hover:   #1e8e3a;    /* Green hover */
    --color-accent-light:   #e8f5e9;    /* Green tint for backgrounds */

    --color-secondary:      #0071c2;    /* Blue — links, secondary actions */
    --color-secondary-hover:#005fa3;    /* Blue hover */

    /* =========================
       COLORS — Text
       ========================= */
    --color-text-primary:   #1a1a2e;    /* Headings, body text */
    --color-text-secondary: #555;       /* Descriptions, secondary text */
    --color-text-muted:     #64748b;    /* Labels, placeholders, metadata */
    --color-text-disabled:  #aaa;       /* Disabled states */
    --color-text-white:     #fff;       /* Text on dark backgrounds */

    /* =========================
       COLORS — Backgrounds
       ========================= */
    --color-bg-primary:     #fff;       /* Main background */
    --color-bg-secondary:   #f8fafc;    /* Cards, form fields, sections */
    --color-bg-tertiary:    #f0f1f3;    /* Hover states, subtle fills */
    --color-bg-dark:        #1a1a2e;    /* Dark sections, footer */
    --color-bg-overlay:     rgba(0, 0, 0, 0.5); /* Modal overlays */

    /* =========================
       COLORS — Borders & Lines
       ========================= */
    --color-border:         #e2e8f0;    /* Default borders */
    --color-border-light:   #f0f0f0;    /* Subtle separators */
    --color-border-focus:   #1e3a5f;    /* Input focus ring */

    /* =========================
       COLORS — Status
       ========================= */
    --color-success:        #28a745;
    --color-warning:        #ffc107;
    --color-error:          #dc3545;
    --color-info:           #0071c2;

    /* =========================
       TYPOGRAPHY
       ========================= */
    --font-family:          'Open Sans', 'Roboto', sans-serif;
    --font-family-heading:  'Open Sans', 'Roboto', sans-serif;

    /* Font sizes — use these everywhere */
    --text-hero:    3.4rem;     /* Hero titles only */
    --text-h1:      2.2rem;     /* Page/section titles */
    --text-h2:      1.6rem;     /* Sub-section titles */
    --text-h3:      1.2rem;     /* Card headings, modals */
    --text-body:    1rem;       /* 16px — default body */
    --text-body-sm: 0.9rem;     /* Smaller body text */
    --text-label:   0.85rem;    /* Form labels, tabs, nav */
    --text-caption: 0.75rem;    /* Metadata, timestamps */
    --text-tiny:    0.65rem;    /* Badges, very small UI */

    /* Font weights */
    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* Line heights */
    --leading-tight:   1.2;
    --leading-normal:  1.5;
    --leading-relaxed: 1.7;

    /* =========================
       SPACING — 4px base scale
       ========================= */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-7:  32px;
    --space-8:  40px;
    --space-9:  48px;
    --space-10: 64px;

    /* =========================
       BORDER RADIUS
       ========================= */
    --radius-sm:    6px;        /* Small buttons, tags */
    --radius-md:    10px;       /* Cards, inputs */
    --radius-lg:    16px;       /* Form containers, modals */
    --radius-xl:    24px;       /* Hero cards, large sections */
    --radius-pill:  999px;      /* Pill buttons, full-round */
    --radius-circle: 50%;      /* Avatars, round buttons */

    /* =========================
       SHADOWS
       ========================= */
    --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl:    0 20px 60px rgba(0, 0, 0, 0.15);
    --shadow-focus: 0 0 0 3px rgba(30, 58, 95, 0.15);

    /* =========================
       TRANSITIONS
       ========================= */
    --transition-fast:   0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-smooth: 0.35s cubic-bezier(0.25, 1, 0.5, 1);

    /* =========================
       Z-INDEX SCALE
       ========================= */
    --z-dropdown:  100;
    --z-sticky:    500;
    --z-header:    1000;
    --z-overlay:   5000;
    --z-modal:     9000;
    --z-toast:     10000;

    /* =========================
       BREAKPOINTS (reference only — use in media queries)
       ========================= */
    /* Mobile:  ≤ 576px  */
    /* Tablet:  577–992px */
    /* Desktop: 993–1200px */
    /* Wide:    ≥ 1201px */
}


/* ============================================================
   BASE COMPONENT STYLES
   ============================================================ */

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-family);
    font-size: var(--text-label);
    font-weight: var(--weight-semibold);
    padding: 12px 24px;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}

.btn:active {
    transform: scale(0.97);
}

/* Primary Button — Navy (default for search, forms) */
.btn-primary {
    background: var(--color-primary);
    color: var(--color-text-white);
}

.btn-primary:hover {
    background: var(--color-primary-hover);
    box-shadow: var(--shadow-md);
}

/* Accent Button — Green (CTA, book now, confirm) */
.btn-accent {
    background: var(--color-accent);
    color: var(--color-text-white);
}

.btn-accent:hover {
    background: var(--color-accent-hover);
    box-shadow: var(--shadow-md);
}

/* Secondary Button — Outlined */
.btn-secondary {
    background: transparent;
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
}

.btn-secondary:hover {
    background: var(--color-primary);
    color: var(--color-text-white);
}

/* Ghost Button — Minimal */
.btn-ghost {
    background: transparent;
    color: var(--color-text-secondary);
    padding: 8px 16px;
}

.btn-ghost:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

/* Button sizes */
.btn-sm {
    padding: 8px 16px;
    font-size: var(--text-caption);
    border-radius: var(--radius-sm);
}

.btn-lg {
    padding: 16px 32px;
    font-size: var(--text-body);
    border-radius: var(--radius-lg);
}

.btn-full {
    width: 100%;
}

/* ---- Form Inputs ---- */
.input {
    font-family: var(--font-family);
    font-size: var(--text-body-sm);
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    transition: all var(--transition-fast);
    width: 100%;
}

.input:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
    background: var(--color-bg-primary);
}

.input::placeholder {
    color: var(--color-text-muted);
}

/* ---- Cards ---- */
.card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all var(--transition-normal);
}

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

/* ---- Labels ---- */
.label {
    font-size: var(--text-caption);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ---- Badges ---- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: var(--text-tiny);
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-pill);
    line-height: 1;
}

.badge-success {
    background: var(--color-accent-light);
    color: var(--color-accent);
}

.badge-primary {
    background: rgba(30, 58, 95, 0.1);
    color: var(--color-primary);
}