/* =====================================================================
   Arc — tokeni dizajna (tokens.css)
   Polazište: stranica analiza (Inter, akcent #2f5aa8, staklo, gradijent)
   + radni prostor u AutoCAD stilu (model space #212830, ACI boje slojeva).
   Teme: sistemska (prefers-color-scheme) ili izričita [data-theme="light|dark"]
   na <html>. Boje se definišu jednom kroz light-dark(), a shema se bira
   preko color-scheme. Kontrasti (WCAG 2.2 AA) su provjereni skriptom
   ui/provjera_ui.py i zapisani u README.md.
   ===================================================================== */
@layer arc.tokens, arc.base, arc.layout, arc.components, arc.cad, arc.utilities;

/* ---------- fontovi (lokalno, SIL OFL 1.1 — vidi fonts/OFL-*.txt) ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@layer arc.tokens {
  :root { color-scheme: light dark; }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }

  :root {
    /* ---- tipografija ---- */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
    --fs-2xs: 0.75rem;    /* 12 */
    --fs-xs: 0.8125rem;   /* 13 */
    --fs-sm: 0.875rem;    /* 14 */
    --fs-md: 0.9375rem;   /* 15 — osnovni */
    --fs-lg: 1.0625rem;   /* 17 */
    --fs-xl: 1.375rem;    /* 22 */
    --fs-2xl: 1.75rem;    /* 28 */
    --fs-3xl: 2.125rem;   /* 34 */
    --lh: 1.5;
    --lh-tight: 1.25;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --tracking-tight: -0.012em;
    --tracking-caps: 0.06em;

    /* ---- razmaci (osnova 4/8 px) ---- */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px; --sp-9: 64px;
    --gutter: 16px;          /* bočni razmak na telefonu */

    /* ---- radijusi (12–16 umjesto 22 sa stranice analiza) ---- */
    --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;

    /* ---- mete (WCAG 2.5.8: ≥24 px; telefon cilj 44 px) ---- */
    --target-min: 24px;
    --control-h: 40px;
    --control-h-sm: 32px;
    --top-h: 60px;
    --content-max: 1240px;

    /* ---- kretanje ---- */
    --dur-fast: 120ms;
    --dur: 180ms;
    --ease: cubic-bezier(.2, .7, .2, 1);

    /* ---- boje okvira (svijetla, tamna) ---- */
    --c-bg:            light-dark(#eef1f6, #0d1118);
    --c-bg-grad-1:     light-dark(rgba(84, 129, 214, .22), rgba(84, 129, 214, .18));
    --c-bg-grad-2:     light-dark(rgba(232, 150, 110, .16), rgba(214, 120, 84, .10));
    --c-surface:       light-dark(#ffffff, #161b24);             /* puna površina za dugo čitanje */
    --c-surface-2:     light-dark(rgba(16, 24, 40, .04), rgba(255, 255, 255, .05));
    --c-surface-3:     light-dark(rgba(16, 24, 40, .07), rgba(255, 255, 255, .08));
    --c-glass:         light-dark(rgba(255, 255, 255, .74), rgba(24, 29, 39, .76));
    --c-glass-strong:  light-dark(rgba(255, 255, 255, .92), rgba(28, 34, 46, .94));
    --c-glass-border:  light-dark(rgba(255, 255, 255, .75), rgba(255, 255, 255, .08));
    --c-line:          light-dark(rgba(16, 24, 40, .10), rgba(255, 255, 255, .10));  /* ukrasna linija */
    --c-border:        light-dark(#7b8494, #7a8597);   /* granica kontrole ≥3:1 (1.4.11) */
    --c-text:          light-dark(#16202e, #e9ecf2);
    --c-muted:         light-dark(#5d6675, #a3acbb);   /* ≥4,5:1 na pozadini i staklu */
    --c-accent:        light-dark(#2f5aa8, #8db0ec);
    --c-accent-strong: light-dark(#1d3d78, #b9cff5);
    --c-accent-soft:   light-dark(rgba(47, 90, 168, .10), rgba(141, 176, 236, .14));
    --c-accent-line:   light-dark(rgba(47, 90, 168, .35), rgba(141, 176, 236, .40));
    --c-on-accent:     #ffffff;
    --c-btn-from:      #3f6dbf;   /* bijeli tekst ≥5:1 na oba kraja */
    --c-btn-to:        #1d3d78;
    --c-focus:         light-dark(#2f5aa8, #a9c4f2);   /* prsten fokusa ≥3:1 prema pozadini */
    --c-focus-halo:    light-dark(rgba(47, 90, 168, .22), rgba(169, 196, 242, .25));

    /* ---- stanja (tekst ≥4,5:1; uvijek uz ikonu i riječ) ---- */
    --c-ok:        light-dark(#1a6b40, #5fc48a);
    --c-ok-soft:   light-dark(rgba(31, 122, 74, .10), rgba(95, 196, 138, .14));
    --c-info:      light-dark(#2f5aa8, #8db0ec);
    --c-info-soft: light-dark(rgba(47, 90, 168, .10), rgba(141, 176, 236, .14));
    --c-wait:      light-dark(#8f5c00, #e3b24d);
    --c-wait-soft: light-dark(rgba(192, 127, 18, .13), rgba(227, 178, 77, .14));
    --c-err:       light-dark(#b42318, #f27164);
    --c-err-soft:  light-dark(rgba(198, 47, 36, .10), rgba(242, 113, 100, .14));
    --c-neutral:   light-dark(#5d6675, #a3acbb);
    --c-neutral-soft: light-dark(rgba(16, 24, 40, .06), rgba(255, 255, 255, .07));

    /* ---- razlika (ne zelena/crvena — daltonizam); uvijek uz punu/isprekidanu liniju ---- */
    --c-diff-add: light-dark(#0b57d0, #58a6ff);   /* plava = dodano, puna linija */
    --c-diff-rem: light-dark(#b84a00, #ff9b3d);   /* narandžasta = uklonjeno, isprekidana */
    --c-diff-add-soft: light-dark(rgba(11, 87, 208, .10), rgba(88, 166, 255, .15));
    --c-diff-rem-soft: light-dark(rgba(184, 74, 0, .10), rgba(255, 155, 61, .15));

    /* ---- sjene ---- */
    --c-shadow: light-dark(rgba(16, 24, 40, .10), rgba(0, 0, 0, .45));
    --shadow-sm: 0 2px 10px light-dark(rgba(16, 24, 40, .06), rgba(0, 0, 0, .30));
    --shadow-md: 0 1px 0 light-dark(rgba(255, 255, 255, .7), rgba(255, 255, 255, .04)) inset, 0 10px 28px var(--c-shadow), 0 2px 6px light-dark(rgba(16, 24, 40, .05), rgba(0, 0, 0, .25));
    --shadow-lg: 0 24px 60px light-dark(rgba(16, 24, 40, .20), rgba(0, 0, 0, .55));
    --shadow-btn: 0 8px 20px rgba(47, 90, 168, .28), 0 1px 0 rgba(255, 255, 255, .28) inset;
    --blur: blur(18px) saturate(1.4);

    /* =================================================================
       Radni prostor (AutoCAD): model space je taman u obje teme.
       ================================================================= */
    --cad-bg: #212830;            /* model space */
    --cad-grid: rgba(255, 255, 255, .045);
    --cad-grid-major: rgba(255, 255, 255, .085);
    --cad-panel: #1a2028;         /* paleta / paneli */
    --cad-panel-2: #232b35;
    --cad-panel-3: #2c3541;
    --cad-border: #3b4654;        /* ukrasna */
    --cad-border-strong: #6e7a8a; /* kontrole ≥3:1 */
    --cad-text: #d6dde6;
    --cad-muted: #9aa5b4;
    --cad-accent: #8db0ec;
    --cad-select: #ffffff;        /* prsten izbora (unutra) */
    --cad-select-out: #000000;    /* prsten izbora (vani) */
    --cad-hover: rgba(141, 176, 236, .22);

    /* AutoCAD Color Index (ACI) — boje slojeva na tamnom model spaceu (≥3:1) */
    --aci-1: #ff0000;  /* crvena — kote */
    --aci-2: #ffff00;  /* žuta — vrata */
    --aci-3: #00ff00;  /* zelena — prostorije / natpisi */
    --aci-4: #00ffff;  /* cijan — prozori */
    --aci-5: #6f8cff;  /* plava (ACI 5 #0000ff je preslaba na tamnom; svjetlija nijansa) */
    --aci-6: #ff00ff;  /* magenta — elektro */
    --aci-7: #ffffff;  /* bijela — zidovi */
    --aci-8: #8a8a8a;  /* siva — podloga */
    --aci-9: #c0c0c0;

    /* razlika na tamnom model spaceu i na papiru */
    --cad-diff-add: #58a6ff;
    --cad-diff-rem: #ff9b3d;
    --paper-bg: #ffffff;
    --paper-ink: #111111;
    --paper-diff-add: #0b57d0;
    --paper-diff-rem: #b84a00;
    --mono-bg: #000000;
    --mono-ink: #ffffff;
  }

  @media (prefers-reduced-motion: reduce) {
    :root { --dur-fast: 0ms; --dur: 0ms; }
  }
  @media (pointer: coarse) {
    :root { --control-h: 44px; --control-h-sm: 40px; }
  }
}