/* ============================================================
   Corex UI V2 — SINGLE DESIGN TOKEN SOURCE OF TRUTH
   Values are the approved Lovable export (Source of Truth B).
   Colors are OKLCH verbatim from the source. Do not substitute.
   ============================================================ */
:root {
    /* --- Core palette (light) --- */
    --cx-color-background: oklch(0.976 0.002 265);
    --cx-color-surface: oklch(1 0 0);
    --cx-color-surface-muted: oklch(0.962 0.003 265);   /* surface-sunken */
    --cx-color-border: oklch(0.912 0.005 265);
    --cx-color-border-strong: oklch(0.858 0.007 265);
    --cx-color-input: oklch(0.888 0.006 265);           /* control border */

    --cx-color-text: oklch(0.245 0.024 265);            /* foreground */
    --cx-color-text-muted: oklch(0.545 0.017 265);      /* muted-foreground */
    --cx-color-text-subtle: oklch(0.575 0.016 265);     /* shell-muted */
    --cx-color-text-inverse: oklch(0.99 0.002 265);

    --cx-color-primary: oklch(0.494 0.166 279);
    --cx-color-primary-hover: oklch(0.455 0.166 279);
    --cx-color-primary-soft: oklch(0.955 0.012 279);    /* accent */
    --cx-color-accent-foreground: oklch(0.42 0.13 279);
    --cx-color-link: oklch(0.494 0.166 279);
    --cx-color-ring: oklch(0.494 0.166 279);

    /* Canonical Arvo logo gradient endpoints. */
    --cx-brand-start: #4f46e5;
    --cx-brand-end: #0e9f9c;
    --cx-brand-start-hover: color-mix(in oklab, var(--cx-brand-start) 92%, black);
    --cx-brand-end-hover: color-mix(in oklab, var(--cx-brand-end) 92%, black);
    --cx-brand-start-disabled: color-mix(in oklab, var(--cx-brand-start) 72%, var(--cx-color-surface));
    --cx-brand-end-disabled: color-mix(in oklab, var(--cx-brand-end) 72%, var(--cx-color-surface));

    /* Legacy alias — teal is retired; maps to info so old refs stay coherent */
    --cx-color-teal: oklch(0.52 0.13 250);

    /* Legacy brand alias retained for existing non-button consumers. */
    --cx-gradient-brand: var(--cx-color-primary);

    /* --- Semantic --- */
    --cx-color-success: oklch(0.5 0.12 158);
    --cx-color-success-soft: oklch(0.955 0.03 158);
    --cx-color-warning: oklch(0.56 0.12 75);
    --cx-color-warning-soft: oklch(0.962 0.045 85);
    --cx-color-danger: oklch(0.53 0.2 25);
    --cx-color-danger-hover: oklch(0.49 0.2 25);
    --cx-color-danger-soft: oklch(0.958 0.03 25);
    --cx-color-info: oklch(0.52 0.13 250);
    --cx-color-info-soft: oklch(0.955 0.028 250);

    --cx-color-overlay: oklch(0.245 0.024 265 / 45%);

    /* --- Shell surface (topbar + sidebar) --- */
    --cx-shell: oklch(0.988 0.002 265);
    --cx-shell-foreground: oklch(0.3 0.02 265);
    --cx-shell-muted: oklch(0.575 0.016 265);
    --cx-shell-border: oklch(0.9 0.005 265);
    --cx-shell-active: oklch(0.952 0.017 279);

    /* --- Spacing (Lovable exact structural scale) --- */
    --cx-space-1: 0.25rem;   /* 4 */
    --cx-space-2: 0.5rem;    /* 8 */
    --cx-space-3: 0.75rem;   /* 12 */
    --cx-space-4: 1rem;      /* 16 */
    --cx-space-5: 1.25rem;   /* 20 */
    --cx-space-6: 1.5rem;    /* 24 */
    --cx-space-8: 2rem;      /* 32 */
    --cx-space-10: 2.5rem;   /* 40 */
    --cx-space-12: 3rem;     /* 48 */

    /* --- Radius (Lovable: base 6px, sm 4px) --- */
    --cx-radius-sm: 4px;
    --cx-radius-md: 6px;
    --cx-radius-lg: 8px;
    --cx-radius-xl: 10px;
    --cx-radius-2xl: 14px;
    --cx-radius-round: 9999px;

    /* --- Typography --- */
    --cx-font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --cx-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Size ramp remapped to Lovable exact px (root is 15px). */
    --cx-font-size-eyebrow: 10.5px;
    --cx-font-size-xs: 11.5px;   /* grid header, hints, meta, badges */
    --cx-font-size-sm: 12.5px;   /* labels, buttons, nav, tabs, grid values */
    --cx-font-size-md: 13px;     /* body, section, grid primary */
    --cx-font-size-lg: 15px;
    --cx-font-size-xl: 17px;     /* list / page title */
    --cx-font-size-2xl: 22px;    /* object / record title */

    --cx-font-weight-normal: 400;
    --cx-font-weight-medium: 500;
    --cx-font-weight-semibold: 600;
    --cx-font-weight-bold: 700;

    --cx-line-height-tight: 1.2;
    --cx-line-height-snug: 1.35;
    --cx-line-height-body: 1.45;

    /* --- Shadow (elev-1 / elev-2). Used sparingly. --- */
    --cx-shadow-sm: 0 1px 2px oklch(0.245 0.024 265 / 0.05);
    --cx-shadow-md: 0 1px 2px oklch(0.245 0.024 265 / 0.06), 0 6px 18px -8px oklch(0.245 0.024 265 / 0.18);
    --cx-shadow-lg: 0 1px 2px oklch(0.245 0.024 265 / 0.06), 0 6px 18px -8px oklch(0.245 0.024 265 / 0.18);

    /* --- Layout (Lovable exact) --- */
    --cx-header-height: 44px;        /* topbar */
    --cx-sidebar-width: 228px;
    --cx-nav-row-height: 28px;
    --cx-actionbar-height: 44px;     /* record action bar */
    --cx-listbar-height: 48px;       /* list command bar */
    --cx-aside-width: 340px;         /* activity / record aside */
    --cx-aside-width-wide: 380px;
    --cx-content-max-width: none;    /* enterprise workspace uses full width */
    --cx-gutter: 1rem;               /* 16px base content gutter */

    /* --- Z-index --- */
    --cx-z-header: 100;
    --cx-z-dropdown: 1000;
    --cx-z-dialog: 1100;
    --cx-z-toast: 1200;
}

/* ============================================================
   Dark theme — token remap only (no theme engine introduced).
   Applies to OS-level prefers-color-scheme; light stays canonical.
   ============================================================ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --cx-color-background: oklch(0.19 0.014 265);
        --cx-color-surface: oklch(0.225 0.015 265);
        --cx-color-surface-muted: oklch(0.165 0.012 265);
        --cx-color-border: oklch(0.305 0.015 265);
        --cx-color-border-strong: oklch(0.37 0.016 265);
        --cx-color-input: oklch(0.36 0.016 265);

        --cx-color-text: oklch(0.92 0.008 265);
        --cx-color-text-muted: oklch(0.66 0.014 265);
        --cx-color-text-subtle: oklch(0.62 0.013 265);
        --cx-color-text-inverse: oklch(0.99 0.002 265);

        --cx-color-primary: oklch(0.62 0.15 279);
        --cx-color-primary-hover: oklch(0.66 0.15 279);
        --cx-color-primary-soft: oklch(0.3 0.045 279);
        --cx-color-accent-foreground: oklch(0.83 0.06 279);
        --cx-color-link: oklch(0.62 0.15 279);
        --cx-color-ring: oklch(0.62 0.15 279);
        --cx-color-teal: oklch(0.7 0.12 250);

        --cx-color-success: oklch(0.68 0.13 158);
        --cx-color-success-soft: oklch(0.3 0.05 158);
        --cx-color-warning: oklch(0.72 0.13 75);
        --cx-color-warning-soft: oklch(0.32 0.05 80);
        --cx-color-danger: oklch(0.66 0.19 25);
        --cx-color-danger-hover: oklch(0.7 0.19 25);
        --cx-color-danger-soft: oklch(0.32 0.06 25);
        --cx-color-info: oklch(0.7 0.12 250);
        --cx-color-info-soft: oklch(0.3 0.05 250);

        --cx-color-overlay: oklch(0 0 0 / 55%);

        --cx-shell: oklch(0.175 0.013 265);
        --cx-shell-foreground: oklch(0.85 0.01 265);
        --cx-shell-muted: oklch(0.62 0.013 265);
        --cx-shell-border: oklch(0.285 0.014 265);
        --cx-shell-active: oklch(0.31 0.05 279);

        --cx-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.45);
        --cx-shadow-md: 0 1px 2px oklch(0 0 0 / 0.5), 0 8px 22px -8px oklch(0 0 0 / 0.65);
        --cx-shadow-lg: 0 1px 2px oklch(0 0 0 / 0.5), 0 8px 22px -8px oklch(0 0 0 / 0.65);
    }
}

/* ============================================================
   Explicit dark choice (data-theme="dark" on <html>) — wins over a
   light OS. Same approved dark palette as the system block above, so an
   in-app toggle and OS preference resolve to one canonical dark theme.
   ============================================================ */
:root[data-theme="dark"] {
    --cx-color-background: oklch(0.19 0.014 265);
    --cx-color-surface: oklch(0.225 0.015 265);
    --cx-color-surface-muted: oklch(0.165 0.012 265);
    --cx-color-border: oklch(0.305 0.015 265);
    --cx-color-border-strong: oklch(0.37 0.016 265);
    --cx-color-input: oklch(0.36 0.016 265);

    --cx-color-text: oklch(0.92 0.008 265);
    --cx-color-text-muted: oklch(0.66 0.014 265);
    --cx-color-text-subtle: oklch(0.62 0.013 265);
    --cx-color-text-inverse: oklch(0.99 0.002 265);

    --cx-color-primary: oklch(0.62 0.15 279);
    --cx-color-primary-hover: oklch(0.66 0.15 279);
    --cx-color-primary-soft: oklch(0.3 0.045 279);
    --cx-color-accent-foreground: oklch(0.83 0.06 279);
    --cx-color-link: oklch(0.62 0.15 279);
    --cx-color-ring: oklch(0.62 0.15 279);
    --cx-color-teal: oklch(0.7 0.12 250);

    --cx-color-success: oklch(0.68 0.13 158);
    --cx-color-success-soft: oklch(0.3 0.05 158);
    --cx-color-warning: oklch(0.72 0.13 75);
    --cx-color-warning-soft: oklch(0.32 0.05 80);
    --cx-color-danger: oklch(0.66 0.19 25);
    --cx-color-danger-hover: oklch(0.7 0.19 25);
    --cx-color-danger-soft: oklch(0.32 0.06 25);
    --cx-color-info: oklch(0.7 0.12 250);
    --cx-color-info-soft: oklch(0.3 0.05 250);

    --cx-color-overlay: oklch(0 0 0 / 55%);

    --cx-shell: oklch(0.175 0.013 265);
    --cx-shell-foreground: oklch(0.85 0.01 265);
    --cx-shell-muted: oklch(0.62 0.013 265);
    --cx-shell-border: oklch(0.285 0.014 265);
    --cx-shell-active: oklch(0.31 0.05 279);

    --cx-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.45);
    --cx-shadow-md: 0 1px 2px oklch(0 0 0 / 0.5), 0 8px 22px -8px oklch(0 0 0 / 0.65);
    --cx-shadow-lg: 0 1px 2px oklch(0 0 0 / 0.5), 0 8px 22px -8px oklch(0 0 0 / 0.65);
}