/*  Load the marketing-landing display font (Fraunces serif) and body
 *  font (Inter) once for every page that pulls in tokens.css. Keeping
 *  the import here means the rest of the app inherits the typography
 *  without having to add link tags to each Razor view.
 */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600;700&display=swap");

/*  Motion / typography / material foundation and the accessibility layer.
 *  Kept in its own file so the landing page can link it directly without
 *  also pulling the webfont import above (it already links its own subset).
 *  @import must precede all rules, so this stays at the top.
 */
@import url("foundation.css");

/*
 * ChatCRM design tokens — single source of truth for colors.
 *
 * The token NAMES are kept exactly as they were so every CSS file, JS
 * reference and Razor binding keeps working. Only the VALUES have been
 * repointed onto the existing landing palette (parchment / sage / forest
 * green / gold) so the whole dashboard inherits the marketing look.
 *
 * Palette source: /Public zone/*.png + landing.css.
 *   Parchment bg     #f1ece0   Cream card-soft   #fbf8f1
 *   Forest green     #2e3f2c   Sage              #6f8a64
 *   Gold accent      #c8a96a   Ink               #20281f
 *   Hairline border  #d8d2c2
 *
 * Platform colors (WhatsApp / Instagram / Messenger) are still used only
 * on UI that represents that specific channel.
 */
:root {
    /* ── Primary brand (forest green from landing) ───────────── */
    --brand:        #2e3f2c;
    --brand-hover:  #243223;
    --brand-50:     #f1ece0;   /* parchment tint surface */
    --brand-100:    #e7d4a6;   /* warm gold tint for hover/badge */
    --brand-200:    #aabba4;   /* sage soft — secondary accents */
    --brand-text:   #2e3f2c;
    --brand-ring:   rgba(46, 63, 44, 0.18);

    /* ── Semantic states (warm-cast so they sit on parchment) ── */
    --ok:        #4a7c45;
    --ok-bg:     #e3ecd9;
    --ok-text:   #2c4a26;

    --warn:      #c8a96a;
    --warn-bg:   #f4ead0;
    --warn-text: #6b4f1c;

    --danger:      #b34141;
    --danger-bg:   #f1d9d6;
    --danger-text: #762626;

    /* ── Neutrals (parchment system) ─────────────────────────── */
    --bg-page:     #f1ece0;
    --bg-panel:    #ffffff;
    --bg-soft:     #fbf8f1;
    --bg-muted:    #ebe6d8;
    --border:      #d8d2c2;
    --border-soft: #e8e3d4;
    --text:        #20281f;
    --text-muted:  #6a7264;
    --text-dim:    #8a9085;

    /* ── Compat aliases ───────────────────────────────────────────
       Several components (team cards, agent builder, WhatsApp setup, task/contact
       rows, plan cards …) reference --surface / --surface-2 / --card, which were
       never defined — so their `var(--x, #fff)` fallback rendered a hard-white
       surface in EVERY theme, which broke dark mode. Defining them here (pointing
       at the themed neutrals) fixes every such usage at once, in light and dark,
       because the fallback only applies while the variable is undefined. Light is
       unchanged: --bg-panel is #fff in light, matching the old fallbacks. */
    --surface:   var(--bg-panel);
    --surface-2: var(--bg-soft);
    --card:      var(--bg-panel);

    /* ── Chat bubbles — neutral, channel-agnostic ─────────────── */
    --bubble-incoming: #ffffff;
    --bubble-outgoing: #e3ecd9;   /* soft sage cream */
    --bubble-note:     #f4ead0;   /* gold tinted note */

    /* ── Platform brand colors — used ONLY on platform UI ────── */
    --channel-whatsapp:  #25d366;
    --channel-instagram: #d6249f;
    --channel-messenger: #0084ff;
    --channel-telegram:  #229ed9;
    --channel-tiktok:    #1c1c1e;
    --channel-gmail:     #ea4335;

    color-scheme: light;
}

/*
 * ── Dark theme ────────────────────────────────────────────────────────────
 * Only the token VALUES are repointed; every file that reads var(--…) inherits
 * the dark palette with no per-file change. The applied attribute is resolved
 * to an explicit "light"/"dark" by the theme init script (System maps onto the
 * OS setting), so we only ever need the [data-theme="dark"] block here.
 *
 * Warm-cast dark (charcoal with a faint green/olive bias) to match the brand's
 * parchment/forest identity rather than a flat neutral grey.
 *
 * The SAME token overrides also power "Mix" mode — there the document stays light
 * (bare :root) and only the rail subtree gets the dark palette, giving a dark
 * sidebar next to light content. One block, two selectors, no duplication.
 */
:root[data-theme="dark"],
:root[data-theme="mix"] .rail,
:root[data-theme="mix"] .sd-top,
:root[data-theme="mix"] .sd-queue-wrap {
    color-scheme: dark;

    /* Brand — lift the forest green so it reads on a dark ground */
    --brand:        #8bb07d;
    --brand-hover:  #9cbf8e;
    --brand-50:     #1e2620;   /* tint surface */
    --brand-100:    #3a3524;   /* warm gold tint */
    --brand-200:    #3f5138;   /* sage soft */
    --brand-text:   #cfe0c4;
    --brand-ring:   rgba(139, 176, 125, 0.30);

    /* Semantic states — same hues, dark-tinted backgrounds */
    --ok:        #74b568;
    --ok-bg:     #1d2a1a;
    --ok-text:   #c3e2b7;

    --warn:      #d8bd80;
    --warn-bg:   #2c2718;
    --warn-text: #e8d3a0;

    --danger:      #d97a7a;
    --danger-bg:   #2e1c1c;
    --danger-text: #eeb7b7;

    /* Neutrals — charcoal system */
    --bg-page:     #15181a;
    --bg-panel:    #1d2124;
    --bg-soft:     #23282c;
    --bg-muted:    #2a3035;
    --border:      #343b41;
    --border-soft: #2b3136;
    --text:        #e7eae4;
    --text-muted:  #a3a99d;
    --text-dim:    #7f867b;

    /* Chat bubbles */
    --bubble-incoming: #23282c;
    --bubble-outgoing: #2c3b2a;   /* dark sage */
    --bubble-note:     #33301f;   /* dark gold-note */

    /* Materials (foundation.css) — translucent floating chrome: the notification
       panel, popovers, sheets. The light values are parchment-white, so without
       these a floating panel stays cream on a charcoal page. Same alphas as
       light, tinted with the panel charcoal so blurred content still shows
       through. The top edge is light catching the material, so on dark it is a
       faint highlight rather than the bright white rim light uses. */
    --material-bg:        rgba(29, 33, 36, 0.72);
    --material-bg-strong: rgba(29, 33, 36, 0.88);
    --material-edge:      rgba(255, 255, 255, 0.10);

    /* Shadows are cast on a dark ground — the light-theme greens are all but
       invisible there, so deepen them to keep elevation readable. */
    --elev-1: 0 1px 2px rgba(0, 0, 0, .30), 0 2px 6px rgba(0, 0, 0, .28);
    --elev-2: 0 4px 10px rgba(0, 0, 0, .34), 0 14px 32px -14px rgba(0, 0, 0, .55);
    --elev-3: 0 10px 30px -8px rgba(0, 0, 0, .45), 0 30px 60px -20px rgba(0, 0, 0, .65);

    --scrim: rgba(0, 0, 0, 0.55);

    /* Platform brand colors stay identical — they represent the channel, not the theme. */
}