/* ============================================================
   Duallo Design System — Foundations
   Base tokens & semantic styles for the duallo.ai brand.
   Source of truth: vue-ui codebase (Vuetify 3 + custom CSS).
   ============================================================ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./Inter-Regular.woff2") format("woff2");
}
/* Inter 500/600/700 fall back to Google Fonts CDN — load via
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   in your HTML (this is how the production app loads them). */

:root {
  /* -------- Brand --------------------------------------------- */
  --duallo-brand:        #049598;  /* primary brand teal          */
  --duallo-brand-soft:   #13A3B2;  /* selected / hover state      */
  --duallo-brand-bright: #4FE0E8;  /* icon glyphs, glows, accents */
  --duallo-brand-light:  #FFFFFF;  /* brand mark on light bg      */
  --duallo-ink:          #25333A;  /* dark wordmark fill          */

  /* -------- Surfaces (dark theme, the only theme shipped) ----- */
  --bg-app:             #1A1F24;  /* app body, the canvas        */
  --bg-surface:         #1D2B33;  /* cards & primary panels      */
  --bg-surface-2:       #1C272C;  /* panels / form containers    */
  --bg-surface-3:       #25333A;  /* app bar / inset surfaces    */
  --bg-elev:            #2B3B43;  /* raised panels, title bars   */
  --bg-elev-hover:      #34454D;  /* hover on elev surfaces      */
  --bg-row:             #1F2D38;  /* list-item resting           */
  --bg-row-hover:       #263238;  /* list-item hover/selected    */
  --bg-card-light:      #2E3A44;  /* asset / gallery card body   */

  /* -------- Foreground / text -------------------------------- */
  --fg-1:               #FFFFFF;  /* primary text                */
  --fg-2:               #B0BEC5;  /* secondary, descriptions     */
  --fg-3:               #6B7A82;  /* tertiary / meta             */
  --fg-disabled:        rgba(255,255,255,0.38);
  --fg-on-accent:       #0E1A1F;  /* text on lime / mint         */

  /* -------- Accent palette (brand-aligned) ------------------- */
  /* The product runs on a single teal family. KPI counts, CTAs,
     selected rules, and icon glyphs all draw from brand-* tokens. */
  --accent-primary:     var(--duallo-brand);        /* CTAs, KPIs   */
  --accent-primary-hov: var(--duallo-brand-soft);   /* CTA hover    */
  --accent-bright:      var(--duallo-brand-bright); /* icons, glow  */
  --accent-info:        #2196F3;                    /* info badges  */

  /* -------- Semantic / status -------------------------------- */
  --status-success:     #4CAF50;
  --status-warning:     #FB8C00;
  --status-error:       #B00020;
  --status-info:        #2196F3;

  /* -------- Lines, dividers, scrollbars ---------------------- */
  --line-soft:          rgba(255,255,255,0.08);
  --line-strong:        rgba(255,255,255,0.16);
  --scrollbar-track:    #1C272C;
  --scrollbar-thumb:    #4A5A60;
  --scrollbar-thumb-h:  #4FE0E8;

  /* -------- Radii -------------------------------------------- */
  --radius-sm:          8px;
  --radius-md:          12px;     /* default control radius      */
  --radius-lg:          16px;     /* default card radius         */
  --radius-pill:        9999px;

  /* -------- Spacing ------------------------------------------ */
  --space-1:            4px;
  --space-2:            8px;
  --space-3:            12px;
  --space-4:            16px;
  --space-5:            24px;
  --space-6:            32px;
  --space-7:            48px;
  --space-8:            64px;

  /* -------- Shadows ------------------------------------------ */
  --shadow-card:        0 6px 18px rgba(0,0,0,0.40);
  --shadow-card-soft:   0 4px 12px rgba(0,0,0,0.20);
  --shadow-card-hover:  0 12px 24px rgba(0,0,0,0.30);
  --shadow-glow-brand:  0 0 8px rgba(79,224,232,0.18);

  /* -------- Gradients ---------------------------------------- */
  --grad-title:         linear-gradient(90deg, #4FE0E8, #13A3B2, #049598);
  --grad-underline:     linear-gradient(90deg, #4FE0E8, #049598);
  --grad-divider-fade:  linear-gradient(to right, transparent, rgba(255,255,255,0.08), transparent);

  /* -------- Motion ------------------------------------------- */
  --ease-standard:      cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast:           150ms;
  --dur-base:           200ms;
  --dur-slow:           300ms;

  /* -------- Typography (base) -------------------------------- */
  --font-sans:          "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-icon:          "Material Design Icons";
  --fw-regular:         400;
  --fw-medium:          500;
  --fw-semibold:        600;
  --fw-bold:            700;

  --fs-display:         1.75rem;   /* 28px — asset name, hero    */
  --fs-h1:              1.5rem;    /* 24px — page title          */
  --fs-h2:              1.35rem;   /* 21.6px — card title        */
  --fs-h3:              1.2rem;    /* 19.2px — section heading   */
  --fs-h4:              1.1rem;    /* 17.6px — sidebar / overline*/
  --fs-body:            1rem;      /* 16px — default body        */
  --fs-body-sm:         0.95rem;   /* 15.2px — meta / labels     */
  --fs-caption:         0.85rem;   /* 13.6px — stat label        */
  --fs-mono:            0.9rem;

  --stat-value:         2rem;      /* 32px — KPI number          */
}

/* ============================================================
   Semantic element styles — use as ready-made type tokens.
   ============================================================ */

.duallo-body,
.duallo-h1, .duallo-h2, .duallo-h3, .duallo-h4,
.duallo-display, .duallo-meta, .duallo-stat,
.duallo-title-gradient {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--fg-1);
  letter-spacing: -0.005em;
}

.duallo-display    { font-size: var(--fs-display); font-weight: var(--fw-bold);   line-height: 1.15; }
.duallo-h1         { font-size: var(--fs-h1);      font-weight: var(--fw-semibold); line-height: 1.2; }
.duallo-h2         { font-size: var(--fs-h2);      font-weight: var(--fw-bold);   line-height: 1.25; }
.duallo-h3         { font-size: var(--fs-h3);      font-weight: var(--fw-semibold); line-height: 1.3; }
.duallo-h4         { font-size: var(--fs-h4);      font-weight: var(--fw-semibold); line-height: 1.35; }
.duallo-body       { font-size: var(--fs-body);    font-weight: var(--fw-regular); line-height: 1.5; }
.duallo-meta       { font-size: var(--fs-body-sm); font-weight: var(--fw-regular); line-height: 1.45; color: var(--fg-2); }
.duallo-caption    { font-size: var(--fs-caption); font-weight: var(--fw-regular); line-height: 1.4;  color: var(--fg-2); }
.duallo-stat       { font-size: var(--stat-value); font-weight: var(--fw-bold);   line-height: 1; color: var(--duallo-brand); }

/* Signature gradient title used on dashboard / view headers */
.duallo-title-gradient {
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  letter-spacing: 0.5px;
  text-align: center;
  background: var(--grad-title);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.duallo-title-gradient::after {
  content: "";
  display: block;
  width: 60%;
  max-width: 200px;
  height: 2px;
  background: var(--grad-underline);
  margin: 4px auto 0;
  border-radius: 1px;
}

/* Base reset to apply when this stylesheet is the only CSS loaded */
html, body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg-app);
  color: var(--fg-1);
}