/* cm-tokens: the ONE design-token foundation of colorme.vn (colour, type, radius, spacing, shadow).
   Docs: docs/redesign/TOKENS.md (all values, light + dark) and docs/redesign/TYPOGRAPHY.md (the type scale).
   Loaded on every page by components/colorme/layout. Tokens live on :root, so they never change a page by themselves.
   Rule: new CSS never hard-codes a colour, a font size or a font family; it uses these variables.

   Theme: light by default. Dark is opt-in only (owner rule: no OS-following). A visitor's pick:
   (localStorage 'cm-theme' -> <html data-theme="light|dark">, set before paint by the layout; window.cmTheme.set()).
   Landing pages render <html data-theme="light" data-theme-lock>, so they always stay light.
   .cm-theme-light forces the light values on a subtree (document previews, exported "paper"). */

:root,
.cm-theme-light {
    color-scheme: light;

    /* Surfaces */
    --cm-bg: #FFFFFF;            /* page */
    --cm-bg-subtle: #F9FAFB;     /* tinted page areas (tool pages, table stripes) */
    --cm-surface: #FFFFFF;       /* cards, panels, inputs */
    --cm-surface-2: #F2F4F7;     /* fills: pills, hovers, segmented controls, image placeholders */
    --cm-surface-3: #E4E7EC;     /* stronger fill: pressed, tracks */
    --cm-elevated: #FFFFFF;      /* menus, popovers, modals, toasts */
    --cm-inverse: #101828;       /* solid dark button / tooltip background */
    --cm-inverse-hover: #1D2939;
    --cm-on-inverse: #FFFFFF;    /* text on --cm-inverse */

    /* Text */
    --cm-text: #101828;          /* primary: headings, body */
    --cm-text-2: #475467;        /* secondary: lead paragraphs, labels */
    --cm-muted: #667085;         /* meta, captions, help text (AA on white and --cm-surface-2) */
    --cm-faint: #98A2B3;         /* placeholders, disabled, decorative only (not AA: never for real text) */

    /* Lines */
    --cm-line: #EAECF0;          /* hairlines, card borders, dividers */
    --cm-line-2: #D0D5DD;        /* input borders, stronger dividers */

    /* Brand + links */
    --cm-accent: #F15A24;        /* brand orange: icons, focus accents, fills; NOT for text (3.4:1 on white) -> --cm-accent-text */
    --cm-accent-text: #C2410C;   /* brand orange as TEXT on light surfaces (5.2:1 on white) */
    --cm-on-accent: #FFFFFF;
    --cm-link: #C4320A;          /* text links inside prose (5.5:1) */
    --cm-grad: linear-gradient(to right, #F5AF19, #F15A24); /* the single primary CTA background only, never text */
    --cm-on-grad: #fff;          /* text on --cm-grad: owner decision 2026-10-02 = white text + icons on every gradient button */

    /* Status (text colour + soft background) */
    --cm-success: #067647;  --cm-success-bg: #ECFDF3;
    --cm-warning: #B54708;  --cm-warning-bg: #FFFAEB;
    --cm-danger: #B42318;   --cm-danger-bg: #FEF3F2;
    --cm-info: #175CD3;     --cm-info-bg: #EFF8FF;

    /* Focus, overlay, shadow, skeleton */
    --cm-focus-color: #101828;
    --cm-focus: 0 0 0 3px rgba(16, 24, 40, .12);   /* box-shadow ring (same shape as cm-ui) */
    --cm-overlay: rgba(16, 24, 40, .6);
    --cm-shadow-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --cm-shadow-2: 0 16px 40px -12px rgba(16, 24, 40, .22), 0 0 0 1px rgba(16, 24, 40, .04);
    --cm-shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px -4px rgba(16, 24, 40, .08);         /* cards at rest: soft elevation */
    --cm-shadow-card-hover: 0 2px 4px rgba(16, 24, 40, .05), 0 14px 32px -10px rgba(16, 24, 40, .18); /* card / image hover lift */
    --cm-skeleton: #F2F4F7;

    /* Footer: a dark band in BOTH themes (light text on it never changes). In dark mode it lifts to a surface
       with a hairline on top, so it still separates from the page background. */
    --cm-footer-bg: #101828;
    --cm-footer-edge: transparent;          /* top hairline (inset shadow, no layout shift) */
    --cm-footer-text: #F2F4F7;              /* headings, hotlines */
    --cm-footer-muted: #98A2B3;             /* links (7.0:1 on #101828) */
    --cm-footer-dim: #8B95A7;               /* legal text, small labels (5.9:1 on the footer bg; was #667085 = 3.6:1) */
    --cm-footer-strong: #FFFFFF;            /* link hover, wordmark */
    --cm-footer-legal: #D0D5DD;             /* company name */
    --cm-footer-sep: #475467;               /* dot separators */
    --cm-footer-line: rgba(255, 255, 255, .08);
    --cm-footer-line-2: rgba(255, 255, 255, .14);
    --cm-footer-hover: rgba(255, 255, 255, .06);
    --cm-footer-accent: #FDB022;            /* focus ring + AI badge on the dark band */
}

.cm-theme-light { color: var(--cm-text); background-color: var(--cm-bg); }

:root {
    /* Type (see TYPOGRAPHY.md). Mobile values first, desktop from 768px. */
    --cm-font: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --cm-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --cm-fs-display: 26px;       /* 32 desktop: one hero/page title per page */
    --cm-fs-h1: 22px;            /* 26 desktop */
    --cm-fs-h2: 18px;            /* 20 desktop */
    --cm-fs-h3: 16px;            /* 17 desktop */
    --cm-fs-h4: 15px;
    --cm-fs-body: 15px;
    --cm-fs-body-sm: 13px;
    --cm-fs-caption: 12px;       /* the smallest size on the site */
    --cm-fw-regular: 400;        /* body */
    --cm-fw-medium: 500;         /* UI: buttons, labels, tabs */
    --cm-fw-semibold: 600;       /* emphasis, buttons */
    --cm-fw-heading: 700;        /* headings: hierarchy from weight + contrast, not size */
    --cm-lh-heading: 1.2;
    --cm-lh-body: 1.55;
    --cm-lh-ui: 1.4;
    --cm-ls-tight: -0.02em;      /* sizes >= 24px only */
    /* Aliases kept identical to cm-ui's names, so both systems resolve to one scale */
    --cm-fs-title: var(--cm-fs-display);
    --cm-fs-small: var(--cm-fs-body-sm);

    /* Radius */
    --cm-radius-sm: 8px;
    --cm-radius: 10px;           /* = cm-ui --cm-r: inputs, buttons */
    --cm-radius-lg: 16px;        /* = cm-ui --cm-r-img: cards, images, panels */
    --cm-radius-xl: 24px;
    --cm-radius-pill: 999px;

    /* Spacing: 8px grid */
    --cm-space-1: 4px;
    --cm-space-2: 8px;
    --cm-space-3: 12px;
    --cm-space-4: 16px;
    --cm-space-5: 24px;
    --cm-space-6: 32px;
    --cm-space-7: 48px;
    --cm-space-8: 64px;
}
@media (min-width: 768px) {
    :root {
        --cm-fs-display: 32px;
        --cm-fs-h1: 26px;
        --cm-fs-h2: 20px;
        --cm-fs-h3: 17px;
    }
}

/* ---------- Dark theme: neutral greys, not blue-black ---------- */
:root[data-theme="dark"] {
    color-scheme: dark;
    --cm-bg: #0B0D12;
    --cm-bg-subtle: #0E1117;
    --cm-surface: #12151C;
    --cm-surface-2: #181C25;
    --cm-surface-3: #212633;
    --cm-elevated: #1A1E28;
    --cm-inverse: #F2F4F7;
    --cm-inverse-hover: #FFFFFF;
    --cm-on-inverse: #0B0D12;
    --cm-text: #F2F4F7;          /* 17.6:1 on bg */
    --cm-text-2: #C3C9D4;        /* 11:1 on surface */
    --cm-muted: #98A2B3;         /* 7.1:1 on surface, 6.6:1 on surface-2 */
    --cm-faint: #6B7385;
    --cm-line: #232836;
    --cm-line-2: #303747;
    --cm-accent: #F15A24;        /* 5.4:1 on surface */
    --cm-accent-text: #FF8A5C;
    --cm-on-accent: #FFFFFF;
    --cm-link: #FF8A5C;          /* 7.9:1 on surface */
    --cm-success: #47CD89;  --cm-success-bg: #0C2A1C;
    --cm-warning: #FDB022;  --cm-warning-bg: #2B2109;
    --cm-danger: #F97066;   --cm-danger-bg: #2A1515;
    --cm-info: #84CAFF;     --cm-info-bg: #0B2140;
    --cm-focus-color: #F2F4F7;
    --cm-focus: 0 0 0 3px rgba(242, 244, 247, .22);
    --cm-overlay: rgba(0, 0, 0, .7);
    --cm-shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --cm-shadow-2: 0 16px 40px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06);
    --cm-shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px -4px rgba(0, 0, 0, .35);
    --cm-shadow-card-hover: 0 2px 4px rgba(0, 0, 0, .35), 0 14px 32px -10px rgba(0, 0, 0, .6);
    --cm-skeleton: #1F2430;
    --cm-footer-bg: #12151C;
    --cm-footer-edge: #232836;
}
/* No OS-following (owner rule: light by default, dark only when the user picks it): the head script in
   components/colorme/layout sets data-theme="dark" only for a stored 'dark' choice. Every dark rule is written once,
   under :root[data-theme="dark"] (docs/redesign/TOKENS.md). */