/* ============================================================================
   Compacto design tokens (PR 05.01).
   System reference: the visual guide in docs/design/compacto-visual-redesign-collaboration.md.
   Value reference: Lovable "emerald-flow" src/styles.css (oklch converted to hex exactly), see
   "Design Reference v2" in the same document.

   This file is GLOBAL but contains only:
     1. --cp-* custom properties for the three themes (light, dark, high-contrast)
     2. their mapping onto Bootstrap 5.3 variables — both --bs-* and --x-* (Webpixels compiles Bootstrap
        with the x- prefix, so the --x-* copies are the ones the current stylesheet actually reads)
     3. base typography (body / headings font families)
     4. the prefers-reduced-motion guard
   Component-level rules live in compacto.css and are scoped under .cp-ui.
   Removing the <link> to this file reverts every page to the previous look.
   ============================================================================ */

:root {
    /* ---- palette (light = Lovable :root) ---- */
    --cp-bg: #F8FAFC;
    --cp-surface: #FFFFFF;
    --cp-popover: #FFFFFF;
    --cp-surface-2: #ECF1F6;          /* secondary */
    --cp-bg-muted: #F1F4F8;           /* muted */
    --cp-text: #0B1827;               /* foreground */
    --cp-text-2: #526274;             /* muted-foreground */
    --cp-text-2-strong: #213244;      /* secondary-foreground */
    --cp-primary: #006E4C;
    --cp-primary-2: #005E3D;          /* accent-foreground / pressed */
    --cp-teal: #13AE9C;
    --cp-accent-bg: #E3FAF0;          /* accent */
    --cp-accent-fg: #005E3D;          /* accent-foreground */
    --cp-border: #DCE2E9;
    --cp-input-border: #DCE2E9;
    --cp-border-hover: rgba(0, 110, 76, 0.35);
    --cp-danger: #DC2828;             /* guide §2 (Lovable kept the shadcn default) */
    --cp-danger-bg: #FDECEC;
    --cp-success-bg: #DCF9E6;
    --cp-success-fg: #005526;
    --cp-warning-bg: #FFF1CA;
    --cp-warning-fg: #7F4E00;
    --cp-on-primary: #FFFFFF;
    --cp-on-gradient: #FFFFFF;
    --cp-gradient-brand: linear-gradient(135deg, hsl(160 84% 23%), hsl(173 80% 24%));
    --cp-primary-fill: var(--cp-gradient-brand);
    --cp-ring: #008A64;
    --cp-focus-ring: rgba(0, 138, 100, 0.45);
    --cp-focus-outline: var(--cp-ring);
    --cp-logo-accent: hsl(160 84% 36%);   /* bars of the wordmark, as on the landing */

    /* ---- depth (guide §5 / Lovable shadow-card, shadow-action) ---- */
    --cp-shadow-card: 0 1px 3px hsl(215 33% 17% / 0.05), 0 1px 2px -1px hsl(215 33% 17% / 0.05);
    --cp-shadow-elevated: 0 8px 24px -4px hsl(215 33% 17% / 0.08), 0 2px 6px -2px hsl(215 33% 17% / 0.05);
    --cp-shadow-action: 0 8px 22px -7px hsl(160 84% 23% / 0.38);

    /* ---- surfaces used by the shell and hero (guide §11, §12, §13) ---- */
    --cp-nav-bg: rgba(248, 250, 252, 0.85);
    --cp-nav-blur: 24px;
    --cp-grid-line: var(--cp-border);
    --cp-grid-size: 64px;
    --cp-grid-mask: radial-gradient(ellipse 80% 70% at 50% 0%, #000 35%, transparent 100%);
    --cp-code-bg: #0F172A;
    --cp-code-text: #E2E8F0;
    --cp-code-border: #1E293B;

    /* ---- typography (guide §3) ---- */
    --cp-font-heading: "Outfit", "Inter", system-ui, sans-serif;
    --cp-font-body: "Inter", system-ui, sans-serif;
    --cp-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --cp-font-logo: "Nunito", "Inter", system-ui, sans-serif;
    --cp-text-xs: 12px;
    --cp-text-sm: 14px;
    --cp-text-md: 16px;
    --cp-text-lg: 18px;
    --cp-text-h3: 20px;
    --cp-text-h2: 24px;
    --cp-text-h1: 42px;               /* hero H1 mobile (Lovable text-[42px]) */
    --cp-leading-tight: 1.04;
    --cp-leading-heading: 1.2;
    --cp-leading-body: 1.6;
    --cp-tracking-heading: -0.02em;
    --cp-tracking-label: 0.08em;
    --cp-tracking-label-wide: 0.12em;

    /* ---- shape (guide §4 / Lovable radius scale) ---- */
    --cp-radius-card: 16px;           /* rounded-2xl */
    --cp-radius-panel: 12px;          /* rounded-xl */
    --cp-radius-input: 10px;
    --cp-radius-nav: 8px;             /* rounded-lg */
    --cp-radius-icon-btn: 12px;       /* rounded-xl */
    --cp-radius-pill: 999px;
    --cp-btn-sm: 36px;
    --cp-btn-md: 40px;
    --cp-btn-lg: 48px;
    --cp-input-h: 44px;               /* search pill h-11 */
    --cp-touch-min: 44px;
    --cp-icon-box: 40px;
    --cp-icon-box-lg: 44px;
    --cp-icon-box-radius: 12px;

    /* ---- layout (guide §6, §12) ---- */
    --cp-container: 1200px;
    --cp-container-wide: 1400px;      /* table-heavy pages (.cp-page--wide) */
    --cp-nav-max: 1536px;             /* the top bar is wider than the content (soft cap) */
    --cp-gutter: 24px;
    --cp-nav-h: 64px;
    --cp-card-gap: 20px;
    --cp-card-pad: 24px;
    --cp-btn-gap: 12px;
    --cp-section-gap: 32px;
    --cp-section-gap-lg: 48px;

    /* ---- motion (guide §14 / Lovable rise) ---- */
    --cp-motion-enter: 500ms;
    --cp-motion-stagger: 80ms;
    --cp-motion-hover: 300ms;
    --cp-motion-fast: 180ms;
    --cp-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --cp-enter-offset: 16px;
    /* orbit ring of the sign-in and forgot-password views (PR 05.12): full size when the view opens,
       then it shrinks away behind the card */
    --cp-orbit-hold: 1s;              /* time at full size */
    --cp-orbit-exit: 3s;              /* time it takes to shrink until it is gone */

    --cp-z-nav: 1030;

    /* Tells the browser which chrome to use for native controls (select popups, scrollbars). */
    color-scheme: light;
}

@media (min-width: 768px) {
    :root {
        --cp-text-h1: 48px;           /* md:text-5xl */
    }
}

@media (max-width: 767.98px) {
    :root {
        --cp-grid-size: 48px;
    }
}

/* ---- dark theme (Lovable .dark) ---- */
:root[data-bs-theme="dark"] {
    color-scheme: dark;
    --cp-bg: #060E18;
    --cp-surface: #0E1823;
    --cp-popover: #0F172B;
    --cp-surface-2: #1D293D;
    --cp-bg-muted: #1D293D;
    --cp-text: #F8FAFC;
    --cp-text-2: #90A1B9;
    --cp-text-2-strong: #CBD5E1;
    --cp-primary: #16C18B;
    --cp-primary-2: #12A878;
    --cp-teal: #2DD4BF;
    --cp-accent-bg: #0A2B1E;
    --cp-accent-fg: #9EEBC9;
    --cp-border: rgba(255, 255, 255, 0.10);
    --cp-input-border: rgba(255, 255, 255, 0.15);
    --cp-border-hover: rgba(22, 193, 139, 0.45);
    --cp-danger: #FF6467;
    --cp-danger-bg: rgba(255, 100, 103, 0.14);
    --cp-success-bg: #012A15;
    --cp-success-fg: #7DDD9C;
    --cp-warning-bg: #372200;
    --cp-warning-fg: #F7C15F;
    --cp-on-primary: #040C15;
    --cp-on-gradient: #FFFFFF;      /* the brand gradient stays dark emerald: white text keeps contrast */
    --cp-ring: #16C18B;
    --cp-focus-ring: rgba(22, 193, 139, 0.5);
    --cp-focus-outline: var(--cp-ring);
    --cp-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px -1px rgba(0, 0, 0, 0.45);
    --cp-shadow-elevated: 0 8px 24px -4px rgba(0, 0, 0, 0.6), 0 2px 6px -2px rgba(0, 0, 0, 0.45);
    --cp-shadow-action: 0 8px 22px -7px rgba(22, 193, 139, 0.35);
    --cp-nav-bg: rgba(6, 14, 24, 0.85);
    --cp-code-bg: #030810;
    --cp-code-text: #E2E8F0;
    --cp-code-border: rgba(255, 255, 255, 0.10);
}

/* ---- high-contrast theme (Lovable .contrast; focus ring yellow per guide §16) ---- */
:root[data-bs-theme="high-contrast"] {
    color-scheme: dark;
    --cp-bg: #000000;
    --cp-surface: #000000;
    --cp-popover: #000000;
    --cp-surface-2: #060606;
    --cp-bg-muted: #060606;
    --cp-text: #FFFFFF;
    --cp-text-2: #D1D1D1;
    --cp-text-2-strong: #FFFFFF;
    --cp-primary: #27ED74;
    --cp-primary-2: #27ED74;
    --cp-teal: #27ED74;
    --cp-accent-bg: #021406;
    --cp-accent-fg: #66FF94;
    --cp-border: #FFFFFF;
    --cp-input-border: #FFFFFF;
    --cp-border-hover: #27ED74;
    --cp-danger: #FF4E47;
    --cp-danger-bg: #3A0000;
    --cp-success-bg: #001705;
    --cp-success-fg: #66FF94;
    --cp-warning-bg: #1E1400;
    --cp-warning-fg: #FFD838;
    --cp-on-primary: #000000;
    --cp-on-gradient: #000000;
    --cp-gradient-brand: none;
    --cp-primary-fill: linear-gradient(#27ED74, #27ED74);
    --cp-ring: #FFD400;
    --cp-focus-ring: #FFD400;
    --cp-focus-outline: #FFD400;
    --cp-logo-accent: #27ED74;
    --cp-shadow-card: none;
    --cp-shadow-elevated: none;
    --cp-shadow-action: none;
    --cp-nav-bg: #000000;
    --cp-nav-blur: 0px;
    --cp-grid-line: rgba(255, 255, 255, 0.22);
    --cp-grid-mask: none;
    --cp-code-bg: #000000;
    --cp-code-text: #FFFFFF;
    --cp-code-border: #FFFFFF;
}

/* ============================================================================
   Bootstrap 5.3 variable mapping. Same selectors for the three themes so the
   theme attribute alone switches every Bootstrap component that reads variables.
   ============================================================================ */
:root,
:root[data-bs-theme="light"],
:root[data-bs-theme="dark"],
:root[data-bs-theme="high-contrast"] {
    --bs-body-bg: var(--cp-bg);
    --x-body-bg: var(--cp-bg);
    --bs-body-color: var(--cp-text);
    --x-body-color: var(--cp-text);
    --bs-emphasis-color: var(--cp-text);
    --x-emphasis-color: var(--cp-text);
    --bs-heading-color: var(--cp-text);
    --x-heading-color: var(--cp-text);
    --bs-secondary-color: var(--cp-text-2);
    --x-secondary-color: var(--cp-text-2);
    --bs-secondary-bg: var(--cp-surface-2);
    --x-secondary-bg: var(--cp-surface-2);
    --bs-tertiary-color: var(--cp-text-2);
    --x-tertiary-color: var(--cp-text-2);
    --bs-tertiary-bg: var(--cp-bg-muted);
    --x-tertiary-bg: var(--cp-bg-muted);
    --bs-border-color: var(--cp-border);
    --x-border-color: var(--cp-border);
    --bs-border-color-translucent: var(--cp-border);
    --x-border-color-translucent: var(--cp-border);
    --bs-primary: var(--cp-primary);
    --x-primary: var(--cp-primary);
    --bs-primary-text-emphasis: var(--cp-accent-fg);
    --x-primary-text-emphasis: var(--cp-accent-fg);
    --bs-primary-bg-subtle: var(--cp-accent-bg);
    --x-primary-bg-subtle: var(--cp-accent-bg);
    --bs-primary-border-subtle: var(--cp-border-hover);
    --x-primary-border-subtle: var(--cp-border-hover);
    --bs-danger: var(--cp-danger);
    --x-danger: var(--cp-danger);
    --bs-danger-text-emphasis: var(--cp-danger);
    --x-danger-text-emphasis: var(--cp-danger);
    --bs-danger-bg-subtle: var(--cp-danger-bg);
    --x-danger-bg-subtle: var(--cp-danger-bg);
    --bs-success-text-emphasis: var(--cp-success-fg);
    --x-success-text-emphasis: var(--cp-success-fg);
    --bs-success-bg-subtle: var(--cp-success-bg);
    --x-success-bg-subtle: var(--cp-success-bg);
    --bs-warning-text-emphasis: var(--cp-warning-fg);
    --x-warning-text-emphasis: var(--cp-warning-fg);
    --bs-warning-bg-subtle: var(--cp-warning-bg);
    --x-warning-bg-subtle: var(--cp-warning-bg);
    --bs-form-invalid-color: var(--cp-danger);
    --x-form-invalid-color: var(--cp-danger);
    --bs-form-invalid-border-color: var(--cp-danger);
    --x-form-invalid-border-color: var(--cp-danger);
    --bs-link-color: var(--cp-primary);
    --x-link-color: var(--cp-primary);
    --bs-link-hover-color: var(--cp-primary-2);
    --x-link-hover-color: var(--cp-primary-2);
    --bs-font-sans-serif: var(--cp-font-body);
    --x-font-sans-serif: var(--cp-font-body);
    --bs-font-monospace: var(--cp-font-mono);
    --x-font-monospace: var(--cp-font-mono);
    --bs-body-font-family: var(--cp-font-body);
    --x-body-font-family: var(--cp-font-body);
    --bs-body-font-size: 1rem;
    --x-body-font-size: 1rem;
    --bs-body-line-height: var(--cp-leading-body);
    --x-body-line-height: var(--cp-leading-body);
    --bs-border-radius: var(--cp-radius-input);
    --x-border-radius: var(--cp-radius-input);
    --bs-border-radius-sm: 8px;
    --x-border-radius-sm: 8px;
    --bs-border-radius-lg: var(--cp-radius-panel);
    --x-border-radius-lg: var(--cp-radius-panel);
    --bs-border-radius-xl: var(--cp-radius-card);
    --x-border-radius-xl: var(--cp-radius-card);
    --bs-border-radius-pill: var(--cp-radius-pill);
    --x-border-radius-pill: var(--cp-radius-pill);
    --bs-box-shadow-sm: var(--cp-shadow-card);
    --x-box-shadow-sm: var(--cp-shadow-card);
    --bs-box-shadow: var(--cp-shadow-card);
    --x-box-shadow: var(--cp-shadow-card);
    --bs-box-shadow-lg: var(--cp-shadow-elevated);
    --x-box-shadow-lg: var(--cp-shadow-elevated);
    --bs-focus-ring-color: var(--cp-focus-ring);
    --x-focus-ring-color: var(--cp-focus-ring);
    --bs-focus-ring-width: 3px;
    --x-focus-ring-width: 3px;
}

/* RGB triplets are needed by Bootstrap utilities that build rgba() from them. */
:root,
:root[data-bs-theme="light"] {
    --bs-primary-rgb: 0, 110, 76;
    --x-primary-rgb: 0, 110, 76;
    --bs-danger-rgb: 220, 40, 40;
    --x-danger-rgb: 220, 40, 40;
    --bs-body-bg-rgb: 248, 250, 252;
    --x-body-bg-rgb: 248, 250, 252;
    --bs-body-color-rgb: 11, 24, 39;
    --x-body-color-rgb: 11, 24, 39;
    --bs-link-color-rgb: 0, 110, 76;
    --x-link-color-rgb: 0, 110, 76;
    --bs-link-hover-color-rgb: 0, 94, 61;
    --x-link-hover-color-rgb: 0, 94, 61;
}

:root[data-bs-theme="dark"] {
    --bs-primary-rgb: 22, 193, 139;
    --x-primary-rgb: 22, 193, 139;
    --bs-danger-rgb: 255, 100, 103;
    --x-danger-rgb: 255, 100, 103;
    --bs-body-bg-rgb: 6, 14, 24;
    --x-body-bg-rgb: 6, 14, 24;
    --bs-body-color-rgb: 248, 250, 252;
    --x-body-color-rgb: 248, 250, 252;
    --bs-link-color-rgb: 22, 193, 139;
    --x-link-color-rgb: 22, 193, 139;
    --bs-link-hover-color-rgb: 18, 168, 120;
    --x-link-hover-color-rgb: 18, 168, 120;
}

:root[data-bs-theme="high-contrast"] {
    --bs-primary-rgb: 39, 237, 116;
    --x-primary-rgb: 39, 237, 116;
    --bs-danger-rgb: 255, 78, 71;
    --x-danger-rgb: 255, 78, 71;
    --bs-body-bg-rgb: 0, 0, 0;
    --x-body-bg-rgb: 0, 0, 0;
    --bs-body-color-rgb: 255, 255, 255;
    --x-body-color-rgb: 255, 255, 255;
    --bs-link-color-rgb: 39, 237, 116;
    --x-link-color-rgb: 39, 237, 116;
    --bs-link-hover-color-rgb: 39, 237, 116;
    --x-link-hover-color-rgb: 39, 237, 116;
}

/* ============================================================================
   Base typography (token level). Headings use the geometric family (guide §3).
   ============================================================================ */
body {
    font-family: var(--cp-font-body);
    letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--cp-font-heading);
    letter-spacing: var(--cp-tracking-heading);
}

code, kbd, pre, samp {
    font-family: var(--cp-font-mono);
}

/* ============================================================================
   Reduced motion (guide §14 / §17): entrance animations and transitions are
   removed for anything that opted into the Compacto motion classes.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    .cp-enter,
    .cp-enter-stagger > *,
    .cp-rise {
        animation: none !important;
    }

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