/* ============================================================
   EmojiCopy — App-component CSS (mirror, do not edit)
   ------------------------------------------------------------
   Verbatim CSS rules pulled from existing Vue components in
   `ui/buttons/*.vue` and `ui/components/Text.vue`. Class names
   match the app's actual code — `variant:green`, `size:lg`, etc. —
   so HTML in the mockups renders the same way the live app does.

   When the app updates a component's `<style scoped>`, update the
   matching block here. DO NOT add new components in this file;
   workspace-only components live in `components.css`.

   Sources (in this repo):
     ui/buttons/Button.vue          → .button + .variant:* + .size:*
     ui/buttons/PrimaryButton.vue   → .primary-button
     ui/buttons/SmallButton.vue     → .small-button
     ui/buttons/IconButton.vue      → .icon-button
     ui/buttons/TextButton.vue      → .text-button
     ui/components/Text.vue         → .text (consumes f:* + c:* utilities)

   Class-name conventions:
     - kebab-case component class      → .button, .text-button, .icon-button
     - `variant:<name>` modifier        → .variant\:green
     - `size:<name>` modifier           → .size\:lg
     - `shape:<name>` modifier          → .shape\:rounded (IconButton)
     - boolean state classes            → .active, .outline, .filled
     - colon (`:`) is escaped in CSS (`\\:`); in HTML it stays a plain colon

   In the HTML, an instance looks like:
     <button class="button primary-button text f:body/l-heavy variant:green size:lg">
        <label>Go Pro</label>
     </button>
   ============================================================ */


/* =====================================================================
   .button   →   ui/buttons/Button.vue
   ===================================================================== */

.button {
    height: 2rem;
    padding: 0 1rem;
    background: var(--bg, #9999);
    color: var(--clr);
    display: inline-flex;
    flex-flow: row nowrap;
    place-items: center;
    justify-content: center;
    cursor: pointer;
    overflow-x: hidden;
    overflow-y: hidden;
    border: none;
    text-decoration: none;
}
.button .text, .button label {
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.button .text::-webkit-scrollbar, .button label::-webkit-scrollbar { display: none; }
.button:disabled { cursor: not-allowed; }

/* variant:black */
.button.variant\:black {
    --bg: var(--c-button-black-bg);
    --clr: light-dark(var(--white), var(--black));
}
.button.variant\:black:hover { --bg: var(--c-button-black-hover-bg); }
.button.variant\:black:disabled {
    --bg: var(--c-button-disabled-bg);
    --clr: var(--c-button-disabled-text);
}

/* variant:destructive */
.button.variant\:destructive {
    --bg: var(--destructive-400);
    --clr: var(--white);
}
.button.variant\:destructive:hover { --bg: var(--destructive-500); }
.button.variant\:destructive:disabled {
    --bg: var(--destructive-400);
    --clr: var(--destructive-300);
}
.button.variant\:destructive.outline {
    --bg: var(--c-surface-primary);
    --clr: var(--c-text-destructive);
    border: 1px solid var(--brdr, var(--clr));
}
.button.variant\:destructive.outline:disabled {
    --bg: var(--c-surface-destructive-highlight);
    --brdr: color-mix(in srgb, var(--c-text-destructive) 10%, transparent);
}
.button.variant\:destructive.outline:disabled label,
.button.variant\:destructive.outline:disabled .icon { opacity: .5; }

/* variant:gray */
.button.variant\:gray {
    --bg: var(--c-button-gray-bg-2);
    --clr: var(--c-text-primary);
}
.button.variant\:gray.active,
.button.variant\:gray:hover {
    --bg: light-dark(var(--metal-200), var(--metal-900));
}
.button.variant\:gray:disabled {
    --bg: var(--c-button-disabled-bg);
    --clr: var(--c-button-disabled-text);
}

/* variant:green */
.button.variant\:green {
    --bg: var(--c-button-green-bg);
    --clr: var(--metal-950);
}
.button.variant\:green:hover {
    --bg: var(--c-button-green-bg-hover);
    --clr: var(--white);
}
.button.variant\:green:disabled {
    --bg: var(--c-button-disabled-bg);
    --clr: var(--c-button-disabled-text);
}

/* variant:green-light */
.button.variant\:green-light {
    --bg: var(--c-surface-highlight);
    --clr: var(--c-button-dark-green);
}
.button.variant\:green-light:hover {
    --bg: var(--c-button-green-bg);
    --clr: var(--metal-950);
}
.button.variant\:green-light:disabled {
    --bg: var(--c-button-disabled-bg);
    --clr: var(--c-button-disabled-text);
}

/* variant:transparent */
.button.variant\:transparent {
    --bg: none;
    --clr: var(--c-text-primary);
    --brdr-clr: var(--c-border-primary);
}
.button.variant\:transparent:disabled {
    --bg: var(--c-button-disabled-bg);
    --clr: var(--c-button-disabled-text);
}
.button.variant\:transparent:active,
.button.variant\:transparent.active {
    --brdr-clr: transparent;
    --bg: var(--c-surface-highlight);
}
.button.variant\:transparent.outline { border: 1px solid var(--brdr-clr); }


/* =====================================================================
   .primary-button   →   ui/buttons/PrimaryButton.vue
   (extends .button; height/padding/radius set here)
   ===================================================================== */

.primary-button {
    border-radius: 10rem;
    height: max(3.38em, 4.6rem);
    gap: max(.66em, .8rem);
    padding: 0 max(1.77em, .8rem);
    background: var(--bg);
}
.primary-button label, .primary-button .icon { color: var(--clr); }
.primary-button .icon { font-size: max(1.11em, 1.6rem); }
.primary-button.size\:xs { font-size: var(--fs-min); }


/* =====================================================================
   .small-button   →   ui/buttons/SmallButton.vue
   ===================================================================== */

.small-button {
    border-radius: 10rem;
    height: max(3em, 3.3rem);
    gap: max(.53em, .4rem);
    padding: 0 max(1.3em, 1.4rem);
    background: var(--bg);
}
.small-button label, .small-button .icon { color: var(--clr); }
.small-button .icon { font-size: max(1.6em, 1.6rem); }
.small-button.size\:sm {
    font-size: var(--fs-min);
    padding-inline: 1.4rem;
}


/* =====================================================================
   .icon-button   →   ui/buttons/IconButton.vue
   ===================================================================== */

.icon-button {
    --br: 10rem;
    border-radius: var(--br);
    height: 4rem;
    width: 4rem;
    aspect-ratio: 1;
    padding: 0;
    background: var(--bg);
    transition: color .2s ease, background .2s ease;
    flex: 1 0;
}
.icon-button .icon {
    color: var(--clr);
    font-size: clamp(2rem, .6em, 2.4rem);
}

.icon-button.shape\:rounded { --br: max(.35em, .8rem); }
.icon-button.shape\:circle  { --br: 50%; }

.icon-button[class*="variant\:"] { --bg: none; }
.icon-button[class*="variant\:"].filled { --fill: var(--c-button-gray-bg); }
.icon-button[class*="variant\:"].active,
.icon-button[class*="variant\:"]:hover { color: inherit; }
.icon-button[class*="variant\:"].active.filled,
.icon-button[class*="variant\:"]:hover.filled { --fill: var(--c-button-gray-bg-2); }
.icon-button[class*="variant\:"]:disabled { --bg: none; --fill: none; }

.icon-button.variant\:white  { --clr: var(--white); }
.icon-button.variant\:white.active,
.icon-button.variant\:white:hover { --bg: light-dark(var(--c-surface-action-bar-hover), var(--black)); }

.icon-button.variant\:black  { --clr: light-dark(var(--black), var(--white)); }
.icon-button.variant\:black.active,
.icon-button.variant\:black:hover { --bg: var(--c-button-gray-bg); }

.icon-button.variant\:gray   { --clr: var(--c-icon-gray); }
.icon-button.variant\:gray.active,
.icon-button.variant\:gray:hover { --clr: var(--c-icon-gray); --bg: var(--c-button-gray-bg); }

.icon-button.variant\:destructive { --clr: var(--destructive-500); }
.icon-button.variant\:destructive.active,
.icon-button.variant\:destructive:hover { color: inherit; --bg: var(--c-button-gray-bg); }

.icon-button.variant\:green {
    --clr: var(--c-button-dark-green);
    --fill: var(--c-surface-highlight) !important;
}
.icon-button.variant\:green:hover { --bg: var(--c-surface-highlight); }
.icon-button.variant\:green:hover:not(.filled) { --clr: inherit; }
.icon-button.variant\:green:hover.filled { --fill: var(--c-button-green-bg-hover) !important; }
.icon-button.variant\:green:disabled { --fill: none !important; opacity: .5; }

.icon-button.variant\:dark {
    --clr: var(--white);
    --bg: var(--metal-800);
}
.icon-button.variant\:dark.active,
.icon-button.variant\:dark:hover { --bg: var(--metal-700); }
.icon-button.variant\:dark:disabled { --clr: var(--c-icon-gray); }

.icon-button.filled { background: var(--fill); }


/* =====================================================================
   .text-button   →   ui/buttons/TextButton.vue
   (extends .button; no padding, no bg — pure colored label)
   ===================================================================== */

.text-button {
    height: 1.61em;
    gap: .44em;
    padding: 0;
    background: none;
}
.text-button label, .text-button .icon {
    color: var(--bg);
    transition: color .2s ease;
}
.text-button .icon { font-size: max(1.11em, 1.6rem); }

.text-button.variant\:green { --bg: var(--c-button-text-green); }
.text-button.variant\:green:hover { --bg: var(--c-button-text-green-hover); }
.text-button.variant\:green:disabled { --bg: var(--c-button-disabled-text); }

.text-button.variant\:menu-back {
    --bg: var(--c-text-tertiary);
    gap: 8px;
}
.text-button.variant\:menu-back .icon { font-size: 2rem; }

.text-button[class*="variant\:"]:hover { color: inherit; }

.text-button.size\:sm\! { font-size: 14px; --fw: 500; }
.text-button.size\:xs { font-size: var(--fs-min); }


/* =====================================================================
   .text   →   ui/components/Text.vue
   ---------------------------------------------------------------------
   The Text Vue component is a thin <component :is="tag"> wrapper that
   adds the `text` class plus `f:body/<type>` and `c:<color>/txt`
   modifiers. The actual font sizes/weights live in tokens.css
   (`.f\:body\/...`) and the color utilities are below.
   ===================================================================== */

/* Color utilities matching `<Text color="white" />` → `c:white/txt` pattern */
.c\:primary\/txt    { color: var(--c-text-primary); }
.c\:secondary\/txt  { color: var(--c-text-secondary); }
.c\:tertiary\/txt   { color: var(--c-text-tertiary); }
.c\:white\/txt      { color: var(--c-text-white); }
.c\:green\/txt      { color: var(--c-icon-green); }
.c\:destructive\/txt{ color: var(--c-text-destructive); }