/* =====================================================================
   Followloop design tokens
   - Framework-agnostic: radi u Blazoru (wwwroot/css), Reactu i MudBlazoru.
   - Svi tokeni imaju prefiks --fl- da se ne sudaraju s Bootstrapom/MudBlazorom.
   - Tema: <html data-theme="light|dark">; bez atributa prati OS.
   ===================================================================== */

:root {
  /* ---- type ---- */
  --fl-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fl-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* ---- surfaces (3 razine + sidebar) ---- */
  --fl-sidebar:   #F1F3F6;
  --fl-canvas:    #F6F7F9;
  --fl-surface:   #FFFFFF;
  --fl-surface-2: #F4F5F8;
  --fl-surface-3: #ECEEF3;
  --fl-line:        #E5E8EE;
  --fl-line-strong: #D3D8E1;

  /* ---- text (sve ≥ 4.5:1 na --fl-surface osim fg-4 koji je samo za placeholder) ---- */
  --fl-fg:   #111723;
  --fl-fg-2: #3F4859;
  --fl-fg-3: #626C7E;
  --fl-fg-4: #99A1B0;

  /* ---- accent (akcija) ---- */
  --fl-accent:       #4F46E5;  /* ikone, rubovi, tekst-linkovi */
  --fl-accent-solid: #4F46E5;  /* pozadina primarnog gumba */
  --fl-accent-hover: #4338CA;
  --fl-accent-soft:  #EEEFFE;
  --fl-accent-fg:    #4338CA;  /* tekst na accent-soft */
  --fl-on-accent:    #FFFFFF;
  --fl-ring:         rgba(79, 70, 229, .22);

  /* ---- AI (isključivo za AI-generirani sadržaj) ---- */
  --fl-ai:      #7C3AED;
  --fl-ai-fg:   #6D28D9;
  --fl-ai-soft: #F5F0FF;
  --fl-ai-line: rgba(124, 58, 237, .30);
  --fl-ai-wash: rgba(139, 92, 246, .075);
  --fl-ai-glow: rgba(124, 58, 237, .16);
  --fl-ai-halo: rgba(124, 58, 237, .06);

  /* ---- semantic ---- */
  --fl-ok: #047857;     --fl-ok-soft: #E8F7F0;
  --fl-warn: #B45309;   --fl-warn-soft: #FDF3E1;
  --fl-danger: #C2362B; --fl-danger-soft: #FDEDEB;

  /* ---- pipeline stages (samo točka + tint, nikad puna pozadina) ---- */
  --fl-st-new:        #8A94A6;
  --fl-st-contacted:  #0284C7;
  --fl-st-conv:       #4F46E5;  /* In conversation */
  --fl-st-interested: #0D9488;
  --fl-st-offerreq:   #CA8A04;  /* Offer requested */
  --fl-st-offer:      #EA580C;  /* Offer sent */
  --fl-st-awaiting:   #C026D3;  /* Awaiting decision */
  --fl-st-notnow:     #A1A1AA;
  --fl-st-client:     #059669;
  --fl-st-notint:     #E11D48;  /* Not interested */

  /* ---- elevation ---- */
  --fl-sh-xs:     0 1px 2px rgba(17, 23, 35, .05);
  --fl-sh-card:   0 1px 2px rgba(17, 23, 35, .05), 0 2px 6px -2px rgba(17, 23, 35, .06);
  --fl-sh-raised: 0 2px 4px -1px rgba(17, 23, 35, .06), 0 12px 24px -8px rgba(17, 23, 35, .15);
  --fl-sh-pop:    0 4px 8px -2px rgba(17, 23, 35, .08), 0 28px 56px -12px rgba(17, 23, 35, .28);
  --fl-scrim:     rgba(17, 23, 35, .30);

  /* ---- motion ---- */
  --fl-ease: cubic-bezier(.2, .8, .2, 1);
  --fl-dur-fast: 150ms;
  --fl-dur: 200ms;

  /* ---- paper: preview of a sent mail, stays white in both themes ---- */
  --fl-paper:      #FFFFFF;
  --fl-paper-fg:   #111723;
  --fl-paper-fg-3: #626C7E;
  --fl-paper-line: #E5E8EE;

  /* ---- inverse: floating bars, tooltips, snackbars ---- */
  --fl-inverse:      #151924;
  --fl-inverse-fg:   #E8EBF1;
  --fl-inverse-fg-2: #A9B1C1;

  color-scheme: light;
}

/* Tamna tema: elevacija = svjetlija površina; sjene gušće; tekstualni accent posvijetljen,
   puni gumb ostaje zasićen da bijeli tekst ima ≥ 4.5:1. */
:root[data-theme="dark"] {
  --fl-sidebar:   #090B0F;
  --fl-canvas:    #0C0E13;
  --fl-surface:   #13161D;
  --fl-surface-2: #191D26;
  --fl-surface-3: #212634;
  --fl-line:        #222733;
  --fl-line-strong: #2F3544;

  --fl-fg:   #E8EBF1;
  --fl-fg-2: #B4BCCB;
  --fl-fg-3: #8790A2;
  --fl-fg-4: #5B6475;

  --fl-accent:       #8B90FF;
  --fl-accent-solid: #5850EC;
  --fl-accent-hover: #6A63F2;
  --fl-accent-soft:  rgba(124, 131, 255, .13);
  --fl-accent-fg:    #AEB2FF;
  --fl-ring:         rgba(139, 144, 255, .30);

  --fl-ai:      #A78BFA;
  --fl-ai-fg:   #C9BBFD;
  --fl-ai-soft: rgba(167, 139, 250, .11);
  --fl-ai-line: rgba(167, 139, 250, .36);
  --fl-ai-wash: rgba(167, 139, 250, .08);
  --fl-ai-glow: rgba(139, 92, 246, .32);
  --fl-ai-halo: rgba(167, 139, 250, .07);

  --fl-ok: #34D399;     --fl-ok-soft: rgba(52, 211, 153, .12);
  --fl-warn: #FBBF24;   --fl-warn-soft: rgba(251, 191, 36, .12);
  --fl-danger: #F87171; --fl-danger-soft: rgba(248, 113, 113, .12);

  --fl-st-new: #7D879A; --fl-st-contacted: #38BDF8; --fl-st-conv: #8B90FF; --fl-st-interested: #2DD4BF;
  --fl-st-offerreq: #FACC15; --fl-st-offer: #FB923C; --fl-st-awaiting: #E879F9; --fl-st-notnow: #A1A1AA;
  --fl-st-client: #34D399; --fl-st-notint: #FB7185;

  /* gornji highlight od 4.5% bijele zamjenjuje vidljivu sjenu na tamnoj podlozi */
  --fl-sh-xs:     inset 0 1px 0 rgba(255, 255, 255, .045), 0 1px 2px rgba(0, 0, 0, .40);
  --fl-sh-card:   inset 0 1px 0 rgba(255, 255, 255, .045), 0 1px 2px rgba(0, 0, 0, .35);
  --fl-sh-raised: inset 0 1px 0 rgba(255, 255, 255, .045), 0 4px 10px -2px rgba(0, 0, 0, .50), 0 16px 30px -10px rgba(0, 0, 0, .65);
  --fl-sh-pop:    inset 0 1px 0 rgba(255, 255, 255, .045), 0 30px 60px -12px rgba(0, 0, 0, .75);
  --fl-scrim:     rgba(0, 0, 0, .55);

  --fl-inverse:      #262B38;

  color-scheme: dark;
}

/* Kad korisnik nije izabrao temu (nema data-theme), prati OS. Iste vrijednosti kao gore. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --fl-sidebar: #090B0F; --fl-canvas: #0C0E13; --fl-surface: #13161D; --fl-surface-2: #191D26; --fl-surface-3: #212634;
    --fl-line: #222733; --fl-line-strong: #2F3544;
    --fl-fg: #E8EBF1; --fl-fg-2: #B4BCCB; --fl-fg-3: #8790A2; --fl-fg-4: #5B6475;
    --fl-accent: #8B90FF; --fl-accent-solid: #5850EC; --fl-accent-hover: #6A63F2; --fl-accent-soft: rgba(124, 131, 255, .13); --fl-accent-fg: #AEB2FF; --fl-ring: rgba(139, 144, 255, .30);
    --fl-ai: #A78BFA; --fl-ai-fg: #C9BBFD; --fl-ai-soft: rgba(167, 139, 250, .11); --fl-ai-line: rgba(167, 139, 250, .36); --fl-ai-wash: rgba(167, 139, 250, .08); --fl-ai-glow: rgba(139, 92, 246, .32); --fl-ai-halo: rgba(167, 139, 250, .07);
    --fl-ok: #34D399; --fl-ok-soft: rgba(52, 211, 153, .12); --fl-warn: #FBBF24; --fl-warn-soft: rgba(251, 191, 36, .12); --fl-danger: #F87171; --fl-danger-soft: rgba(248, 113, 113, .12);
    --fl-st-new: #7D879A; --fl-st-contacted: #38BDF8; --fl-st-conv: #8B90FF; --fl-st-interested: #2DD4BF; --fl-st-offerreq: #FACC15; --fl-st-offer: #FB923C; --fl-st-awaiting: #E879F9; --fl-st-notnow: #A1A1AA; --fl-st-client: #34D399; --fl-st-notint: #FB7185;
    --fl-sh-xs: inset 0 1px 0 rgba(255, 255, 255, .045), 0 1px 2px rgba(0, 0, 0, .40);
    --fl-sh-card: inset 0 1px 0 rgba(255, 255, 255, .045), 0 1px 2px rgba(0, 0, 0, .35);
    --fl-sh-raised: inset 0 1px 0 rgba(255, 255, 255, .045), 0 4px 10px -2px rgba(0, 0, 0, .50), 0 16px 30px -10px rgba(0, 0, 0, .65);
    --fl-sh-pop: inset 0 1px 0 rgba(255, 255, 255, .045), 0 30px 60px -12px rgba(0, 0, 0, .75);
    --fl-scrim: rgba(0, 0, 0, .55);
    --fl-inverse: #262B38;
    color-scheme: dark;
  }
}

html { background: var(--fl-canvas); color: var(--fl-fg); }
body {
  font-family: var(--fl-font-sans);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}