/* ============================================================
   EmojiCopy — Design tokens for marketing mockups
   ------------------------------------------------------------
   1:1 mirror of `ui/css/colors.css` + `ui/css/typography.css` +
   `ui/css/spatial-scale.css`. Token names match the app verbatim
   so a class or var here translates directly to a Vue component
   or CSS line in the app.

   When the app's tokens change, update this file. Nothing in
   `apps/`, `ui/`, or `modules/` is imported.
   ============================================================ */

@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;

    &[data-scheme='dark'] {
        color-scheme: dark;
    }
}

html,
html * {
    transition:
        background-color .25s,
        border-color .25s,
        color .25s;
}

:root {
    /* =================================================================
       PRIMITIVES  →  ui/css/colors.css
       ================================================================= */

    --opacity-premium: .32;

    /* green */
    --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 */
    --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 */
    --destructive-200: #FFD6CD;
    --destructive-300: #CF6666;
    --destructive-400: #AD1103;
    --destructive-500: #8A0E02;

    /* shades */
    --white: #FFFFFF;
    --black: #000000;

    /* c-mapped primitives used directly in designs */
    --c-metal-50: var(--metal-50);
    --c-white:    var(--white);
    --c-green-800: var(--green-800);

    /* =================================================================
       SEMANTIC TOKENS (theme-aware)
       Match `--c-*` names from ui/css/colors.css exactly.
       ================================================================= */

    /* surfaces */
    --c-surface-primary:               light-dark(var(--white),             var(--metal-950));
    --c-surface-primary-0:             light-dark(var(--white),             #0f1012);
    --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-explore-hover:         light-dark(var(--metal-50),          var(--metal-800));
    --c-surface-explore-shade-hover:   light-dark(var(--metal-100),         var(--metal-700));
    --c-surface-highlight:             light-dark(var(--green-400),         var(--metal-800));
    --c-surface-tooltip:               light-dark(var(--metal-900),         var(--metal-800));
    --c-surface-tooltip-2:             light-dark(var(--metal-900),         var(--metal-900));
    --c-surface-light:                 light-dark(var(--green-950),         var(--white));
    --c-surface-dropdown:              light-dark(var(--white),             var(--metal-800));
    --c-surface-dropdown-hover:        light-dark(var(--metal-100),         var(--metal-700));
    --c-surface-dropdown-disabled-hover: light-dark(var(--metal-50),        var(--metal-700));
    --c-surface-action-bar:            light-dark(var(--metal-950),         var(--metal-800));
    --c-surface-action-bar-hover:      light-dark(var(--metal-800),         var(--metal-700));
    --c-surface-combo:                 light-dark(var(--metal-100),         var(--metal-900));
    --c-surface-combo-hover:           light-dark(var(--metal-200),         var(--metal-800));
    --c-surface-destructive-highlight: light-dark(var(--destructive-200),   var(--destructive-500));

    /* modal backdrop overlay (NOT a card surface) */
    --c-surface-modal: light-dark(rgba(0,0,0,.61), rgba(50,50,5,.4));

    /* text */
    --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-text-placeholder: light-dark(var(--metal-400),        var(--metal-500));
    --c-text-disabled:    light-dark(var(--metal-300),        var(--metal-500));
    --c-text-disabled-2:  light-dark(var(--metal-400),        var(--metal-300));
    --c-text-destructive: light-dark(var(--destructive-400),  var(--destructive-300));

    /* input */
    --c-input-primary: light-dark(var(--metal-50), var(--metal-900));

    /* button */
    --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-text-green:       light-dark(var(--green-700),      var(--green-500));
    --c-button-text-green-hover: light-dark(var(--green-800),      var(--green-700));
    --c-button-menu-green:       light-dark(var(--green-500),      var(--green-800));
    --c-button-dark-green:       light-dark(var(--green-900),      var(--green-300));
    --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-button-disabled-bg:      light-dark(var(--metal-200),      var(--metal-900));
    --c-button-disabled-text:    light-dark(var(--metal-400),      var(--metal-500));
    --c-button-disabled-text-2:  light-dark(var(--metal-400),      var(--metal-600));
    --c-button-linear-hover-bg:  light-dark(var(--metal-50),       var(--metal-800));
    --c-button-gray-bg:          light-dark(var(--metal-50),       var(--metal-800));
    --c-button-gray-bg-2:        light-dark(var(--metal-100),      var(--metal-700));
    --c-button-gray-hover-bg-2:  light-dark(var(--metal-200),      var(--metal-900));

    /* icon */
    --c-icon-gray:        light-dark(var(--metal-500),        var(--metal-500));
    --c-icon-green:       light-dark(var(--green-600),        var(--green-500));
    --c-icon-dark-gray:   light-dark(var(--metal-800),        var(--metal-200));
    --c-icon-black:       light-dark(var(--metal-950),        var(--white));
    --c-icon-white:       light-dark(var(--white),            var(--metal-950));
    --c-icon-destructive: light-dark(var(--destructive-400),  var(--destructive-300));
    --c-icon-yellow:      light-dark(#FFC021,                 #FFCF56);

    /* border */
    --c-border-primary:    light-dark(var(--metal-100), var(--metal-800));
    --c-border-secondary:  light-dark(var(--metal-100), var(--metal-700));
    --c-border-tertiary:   light-dark(var(--metal-950), var(--metal-50));
    --c-border-action-bar: light-dark(var(--metal-800), var(--metal-700));

    /* =================================================================
       TYPOGRAPHY  →  ui/css/typography.css
       ================================================================= */

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

    /* =================================================================
       SPACING  →  ui/css/spatial-scale.css
       (4px scale)
       ================================================================= */

    --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;
    --sp-11: 8rem;
    --sp-12: 9.6rem;

    /* radii used across the app */
    --r-xs:   6px;
    --r-sm:   8px;
    --r-md:   12px;
    --r-lg:   16px;
    --r-xl:   24px;
    --r-pill: 999px;

    /* shadow tokens (mirror the modal + card shadows) */
    --shadow-card:    0 16px 72px rgba(23,26,87,.10);
    --shadow-modal:   0 14px 40px rgba(0,0,0,.32);
    --shadow-popover: 0 8px 24px rgba(0,0,0,.08);

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

* {
    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;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
}

/* =====================================================================
   TYPOGRAPHY  —  matches the app's `<Text tag="..." type="..." color="..."/>`
   --------------------------------------------------------------------
   Vue:  <Text tag="h4"            color="white" text="…" />
   HTML: <h4 class="text c:white">…</h4>

   Vue:  <Text type="body/l-heavy" color="white" text="…" />
   HTML: <span class="text f:body/l-heavy c:white">…</span>
   ===================================================================== */

.text {
    font-family: var(--ff-inter);
    color: var(--c-text-primary);
}

/* tag-driven (DM Sans headings) */
h1, h2, h3, h4, h5, h6,
.text[class*="tag:h"] {
    font-family: var(--ff-dm-sans);
    font-weight: 900;
    line-height: 1.1em;
    letter-spacing: -0.04em;
    color: var(--c-text-primary);
}

h1,
.text.tag\:h1 {
    font-size: clamp(3.9rem, 5vw, 7.5rem);
}

h2,
.text.tag\:h2 {
    font-size: clamp(3.7rem, 5vw, 6.7rem);
}

h3,
.text.tag\:h3 {
    font-size: clamp(4.4rem, 5vw, 6.4rem);
}

h4,
.text.tag\:h4 {
    font-size: clamp(3.4rem, 4vw, 5.2rem);
}

h5,
.text.tag\:h5 {
    font-size: clamp(3.3rem, 3.5vw, 4.5rem);
}

h6,
.text.tag\:h6 {
    font-size: clamp(2.6rem, 3vw, 3.9rem);
}

/* type-driven (Inter body) — class names match Figma DS `body/...` */
[class*="f\:body\/"] {
    font-family: var(--ff-inter);
    line-height: 1.6em;
    color: var(--c-text-secondary);
}

.f\:body\/xxl {
    font-size: clamp(2.1rem, 2.4vw, 2.4rem);
    font-weight: 700;
}

.f\:body\/xl {
    font-size: clamp(1.7rem, 2.0vw, 1.9rem);
    font-weight: 700;
}

.f\:body\/l-heavy {
    font-size: clamp(1.5rem, 1.7vw, 1.7rem);
    font-weight: 700;
}

.f\:body\/l-med {
    font-size: clamp(1.5rem, 1.7vw, 1.7rem);
    font-weight: 500;
}

.f\:body\/l-reg {
    font-size: clamp(1.5rem, 1.7vw, 1.7rem);
    font-weight: 400;
}

.f\:body\/m-heavy {
    font-size: clamp(1.3rem, 1.4vw, 1.4rem);
    font-weight: 700;
    line-height: 1.64em;
}

.f\:body\/m-med {
    font-size: clamp(1.3rem, 1.4vw, 1.4rem);
    font-weight: 500;
    line-height: 1.64em;
}

.f\:body\/m-reg {
    font-size: clamp(1.3rem, 1.4vw, 1.4rem);
    font-weight: 400;
    line-height: 1.64em;
}

.f\:body\/s-heavy {
    font-size: clamp(1.1rem, 1.2vw, 1.2rem);
    font-weight: 700;
    line-height: 1.646em;
}

.f\:body\/s-med {
    font-size: clamp(1.1rem, 1.2vw, 1.2rem);
    font-weight: 500;
    line-height: 1.646em;
}

.f\:body\/s-reg {
    font-size: clamp(1.1rem, 1.2vw, 1.2rem);
    font-weight: 400;
    line-height: 1.646em;
}

/* color modifier — DUPLICATED in `app-components.css` as `.c\:*\/txt` to
   match the app's `<Text color="white" />` → `c:white/txt` render pattern.
   The /txt suffix is canonical; the non-suffixed versions below are
   kept only as proposal-only shorthand for legacy mockups. New mockup
   code should use `c:white/txt` form. */
.c\:primary {
    color: var(--c-text-primary);
}

.c\:secondary {
    color: var(--c-text-secondary);
}

.c\:tertiary {
    color: var(--c-text-tertiary);
}

.c\:white {
    color: var(--c-text-white);
}

.c\:green {
    color: var(--c-icon-green);
}

.c\:destructive {
    color: var(--c-text-destructive);
}

/* link reset */
a {
    color: inherit;
    text-decoration: none;

    &:hover {
        text-decoration: underline;
        text-decoration-thickness: 1.5px;
        text-underline-offset: 3px;
    }
}

/* selection */
::selection {
    background-color: var(--c-button-text-green);
    color: var(--c-text-white);
}