/* ============================================================
   EmojiCopy — Marketing brand stylesheet (MOCKUPS ONLY)
   ------------------------------------------------------------
   Standalone tokens + components for the beta/early-access
   marketing mockups. Values are mirrored from the live app so
   handoff to design/dev is 1:1:
     - colors  -> ui/css/colors.css
     - type    -> ui/css/typography.css  (DM Sans headings / Inter body)
     - spacing -> ui/css/spatial-scale.css
   Nothing here is imported by the app. Editing this file does
   NOT touch apps/, ui/, or modules/.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;900&family=Inter:wght@400;500;700&display=swap');

/* ---- color scheme switch (mirrors ui/css/scheme.css) ---- */
html { color-scheme: light; }
html[data-scheme='dark'] { color-scheme: dark; }
html, html * { transition: background-color .3s, border-color .3s, color .3s; }

:root {
    /* ---------- primitives (ui/css/colors.css) ---------- */
    --green-300:#EDFFE5; --green-400:#D6FFC8; --green-500:#85FC64;
    --green-600:#30D909; --green-700:#20AD03; --green-800:#1A8407;
    --green-900:#185710; --green-950:#052A1E;

    --metal-50:#F4F5F7; --metal-100:#EAEBEF; --metal-200:#DCDFE6;
    --metal-300:#B0B5C5; --metal-400:#969CAC; --metal-500:#7C8292;
    --metal-600:#616678; --metal-700:#4B4F5C; --metal-800:#353841;
    --metal-900:#1F2129; --metal-950:#0F1012;

    --destructive-300:#CF6666; --destructive-400:#AD1103;
    --white:#FFFFFF; --black:#000000;

    /* ---------- theme-aware semantic tokens ---------- */
    --c-surface-primary: light-dark(var(--white), var(--metal-950));
    --c-surface-secondary: light-dark(var(--white), var(--metal-900));
    --c-surface-tertiary: light-dark(var(--metal-100), var(--metal-800));
    --c-surface-cta: light-dark(var(--metal-50), var(--metal-900));
    --c-surface-highlight: light-dark(var(--green-400), var(--metal-800));
    --c-surface-tooltip: light-dark(var(--metal-900), var(--metal-800));
    --c-surface-modal: light-dark(rgba(0,0,0,.61), rgba(50,50,5,.4));

    --c-text-primary: light-dark(var(--metal-950), var(--white));
    --c-text-secondary: light-dark(var(--metal-800), var(--metal-200));
    --c-text-tertiary: light-dark(var(--metal-500), var(--metal-400));
    --c-text-white: light-dark(var(--white), var(--metal-950));

    --c-button-green-bg: light-dark(var(--green-500), var(--green-600));
    --c-button-green-bg-hover: light-dark(var(--green-800), var(--green-800));
    --c-button-black-bg: light-dark(var(--metal-950), var(--metal-100));
    --c-button-black-hover-bg: light-dark(var(--metal-800), var(--metal-200));

    --c-icon-green: light-dark(var(--green-600), var(--green-500));
    --c-icon-yellow: light-dark(#FFC021, #FFCF56);

    --c-border-primary: light-dark(var(--metal-100), var(--metal-800));
    --c-border-secondary: light-dark(var(--metal-200), var(--metal-700));

    /* ---------- type ---------- */
    --ff-dm: 'DM Sans', sans-serif;
    --ff-inter: 'Inter', sans-serif;

    /* ---------- spacing (ui/css/spatial-scale.css) ---------- */
    --sp-1:.4rem; --sp-2:.8rem; --sp-3:1.2rem; --sp-4:1.6rem; --sp-5:2rem;
    --sp-6:2.4rem; --sp-7:3.2rem; --sp-8:4rem; --sp-9:4.8rem; --sp-10:6.4rem;

    /* radii used across the app's cards/buttons */
    --r-sm:8px; --r-md:14px; --r-lg:16px; --r-xl:24px; --r-pill:999px;

    font-size: 10px; /* app sets 10px root so 1.6rem == 16px */
}

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

body {
    font-family: var(--ff-inter);
    background: var(--c-surface-primary);
    color: var(--c-text-secondary);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

h1,h2,h3,h4,h5 { font-family: var(--ff-dm); font-weight: 900; letter-spacing: -.04em; line-height: 1.05; color: var(--c-text-primary); }

/* ============================================================
   Reusable brand components
   ============================================================ */

/* --- wordmark --- */
.ec-logo { display:inline-flex; align-items:center; gap:10px; }
.ec-logo svg { width:28px; height:28px; flex:none; }
.ec-logo b { font-family:var(--ff-dm); font-weight:900; font-size:2rem; letter-spacing:-.04em; color:var(--c-text-primary); }

/* --- buttons (mirror ui/buttons/PrimaryButton + SmallButton) --- */
.btn {
    font-family: var(--ff-inter); font-weight:700; font-size:1.4rem;
    border:none; border-radius: var(--r-pill); cursor:pointer;
    padding: 12px 22px; display:inline-flex; align-items:center; gap:8px;
    transition: background .2s, transform .05s, color .2s; white-space:nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--green { background: var(--c-button-green-bg); color: var(--metal-950); }
.btn--green:hover { background: var(--c-button-green-bg-hover); color: var(--white); }
.btn--black { background: var(--c-button-black-bg); color: var(--c-text-white); }
.btn--black:hover { background: var(--c-button-black-hover-bg); }
.btn--ghost { background: transparent; color: var(--c-text-secondary); box-shadow: inset 0 0 0 1.5px var(--c-border-secondary); }
.btn--ghost:hover { background: var(--c-surface-tertiary); }
.btn--sm { padding: 8px 16px; font-size:1.3rem; }
.btn--lg { padding: 15px 28px; font-size:1.6rem; }
.btn--block { width:100%; justify-content:center; }

/* --- beta badge / pills --- */
.pill {
    display:inline-flex; align-items:center; gap:6px;
    font-family:var(--ff-inter); font-weight:700; font-size:1.1rem;
    letter-spacing:.02em; text-transform:uppercase;
    padding:5px 11px; border-radius: var(--r-pill); line-height:1;
}
.pill--beta { background: var(--green-500); color: var(--green-950); }
.pill--beta-dark { background: var(--green-950); color: var(--green-500); box-shadow: inset 0 0 0 1px rgba(133,252,100,.25); }
.pill--soft { background: var(--c-surface-highlight); color: light-dark(var(--green-900), var(--green-400)); }
.pill--dot::before { content:''; width:6px; height:6px; border-radius:50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent); }

/* --- card --- */
.card {
    background: var(--c-surface-secondary);
    border: 1px solid var(--c-border-primary);
    border-radius: var(--r-xl);
    box-shadow: 0 16px 72px 0 rgba(23,26,87,.10);
}

/* --- generic text helpers --- */
.t-tertiary { color: var(--c-text-tertiary); }
.t-primary  { color: var(--c-text-primary); }
.t-green    { color: var(--c-icon-green); }
.eyebrow { font-family:var(--ff-inter); font-weight:700; font-size:1.2rem; letter-spacing:.08em; text-transform:uppercase; color: var(--c-icon-green); }

/* the emoji speech-bubble mark uses JoyPixels green */
.ec-mark { color: var(--green-600); }