/* ==========================================================================
   web-uikit / base.css
   Reset, typography, CSS custom properties
   Color system extracted from Lovable app CSS bundle (2026-06-03)
   ========================================================================== */

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

:root {
    /* ---- Theme colors (exact match to Lovable app) ---- */
    --background:             #fdfcf8;
    --foreground:             #10222b;
    --card:                   #fff;
    --card-foreground:        #10222b;
    --primary:                #437e9c;
    --primary-foreground:     #fdfcf8;
    --primary-soft:           #dff2fd;
    --secondary:              #f4f2ea;
    --secondary-foreground:   #1f303b;
    --muted:                  #f5f3ed;
    --muted-foreground:       #5e6b73;
    --accent:                 #fbe8ce;
    --accent-foreground:      #53311c;
    --destructive:            #de3b3d;
    --destructive-foreground: #fdfcf8;
    --border:                 #e7e4dd;
    --input:                  #e7e4dd;
    --ring:                   #437e9c;

    /* ---- Sidebar (dark teal) ---- */
    --sidebar:                  #437e9c;
    --sidebar-foreground:       #eff6fb;
    --sidebar-accent:           #30647f;
    --sidebar-accent-foreground:#fdfcf8;
    --sidebar-border:           #396d88;

    /* ---- Status colors ---- */
    --color-success:    #00bb7f;  /* emerald-500 */
    --color-success-bg: rgba(0, 187, 127, 0.12);
    --color-warning:    #f99c00;  /* amber-500 */
    --color-warning-bg: rgba(249, 156, 0, 0.12);
    --color-info:       #00a5ef;  /* sky-500 */
    --color-info-bg:    rgba(0, 165, 239, 0.12);
    --color-violet:     #8d54ff;  /* violet-500 */
    --color-violet-bg:  rgba(141, 84, 255, 0.12);
    --color-error:      #de3b3d;
    --color-error-bg:   rgba(222, 59, 61, 0.12);

    /* ---- Neutrals ---- */
    --neutral-200: #e5e5e5;
    --neutral-300: #d4d4d4;
    --neutral-400: #a1a1a1;
    --neutral-500: #737373;
    --neutral-600: #525252;

    /* ---- Typography ---- */
    --font-heading: 'Chiron GoRound TC', system-ui, -apple-system, sans-serif;
    --font-body:    'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --font-size-xs:   0.75rem;    /* 12px, line-height: 1.33 */
    --font-size-sm:   0.875rem;   /* 14px, line-height: 1.43 */
    --font-size-base: 1rem;       /* 16px, line-height: 1.5 */
    --font-size-lg:   1.125rem;   /* 18px, line-height: 1.56 */
    --font-size-xl:   1.25rem;    /* 20px, line-height: 1.4 */
    --font-size-2xl:  1.5rem;     /* 24px, line-height: 1.33 */
    --font-size-3xl:  1.875rem;   /* 30px, line-height: 1.2 */
    --font-size-4xl:  2.25rem;    /* 36px, line-height: 1.1 */
    --font-size-5xl:  3rem;       /* 48px, line-height: 1.0 */
    --line-height:    1.5;

    /* ---- Spacing (Tailwind base: 0.25rem) ---- */
    --spacing-1:   0.25rem;  /* 4px  — Tailwind p-1 */
    --spacing-2:   0.5rem;   /* 8px  — Tailwind p-2 */
    --spacing-3:   0.75rem;  /* 12px — Tailwind p-3 */
    --spacing-4:   1rem;     /* 16px — Tailwind p-4 */
    --spacing-5:   1.25rem;  /* 20px — Tailwind p-5 */
    --spacing-6:   1.5rem;   /* 24px — Tailwind p-6 */
    --spacing-8:   2rem;     /* 32px — Tailwind p-8 */
    --spacing-10:  2.5rem;   /* 40px — Tailwind p-10 */
    --spacing-12:  3rem;     /* 48px — Tailwind p-12 */
    --spacing-16:  4rem;     /* 64px — Tailwind p-16 */
    --spacing-20:  5rem;     /* 80px — Tailwind p-20 */
    --spacing-24:  6rem;     /* 96px — Tailwind p-24 */

    /* Aliases for backward compatibility */
    --spacing-xs:  var(--spacing-1);
    --spacing-sm:  var(--spacing-2);
    --spacing-md:  var(--spacing-4);
    --spacing-lg:  var(--spacing-6);
    --spacing-xl:  var(--spacing-8);
    --spacing-2xl: var(--spacing-12);
    --spacing-3xl: var(--spacing-20);
    --spacing-4xl: var(--spacing-24);

    /* ---- Borders & Shadows ---- */
    --radius:      0.875rem;  /* 14px — Lovable default */
    --radius-sm:   0.5rem;    /* 8px */
    --radius-lg:   1rem;      /* 16px */
    --radius-full: 9999px;
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);

    /* ---- Transitions ---- */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
}

/* ---------- Reset ---------- */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    color: var(--foreground);
    background-color: var(--background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
    color: inherit;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--sidebar-accent);
}

ul, ol {
    list-style: none;
}

table {
    border-collapse: collapse;
    width: 100%;
}

/* ---------- Typography ---------- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--foreground);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
}

h1 { font-size: var(--font-size-5xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl);  }
h5 { font-size: var(--font-size-lg);  }
h6 { font-size: var(--font-size-base); }

p {
    margin-bottom: var(--spacing-md);
}

small {
    font-size: var(--font-size-sm);
    color: var(--muted-foreground);
}

strong {
    font-weight: 600;
}

hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--spacing-xl) 0;
}

::selection {
    background: var(--primary);
    color: var(--primary-foreground);
}

/* ---------- Dark sections (hero, nav, CTA) ---------- */

.dark-section {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section h5,
.dark-section h6 {
    color: #fff;
}

.dark-section p,
.dark-section span {
    color: var(--neutral-400);
}

.dark-section a:not(.btn) {
    color: var(--primary-soft);
}

.dark-section a:not(.btn):hover {
    color: #fff;
}

/* ---------- Utility ---------- */

.text-center { text-align: center; }
.text-muted { color: var(--muted-foreground); }
.text-white { color: #fff; }
.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }