/* tokens.css — Crvena Pilula design tokens.
 * Source: docs/SKYWORK_DESIGN_EXTRACTION.md sekcija 3.1
 * Mapirano iz crvenapilula_sea_hero/src/index.css linije 7-86.
 */

:root {
    /* ──────────────────────────────────────────────────────────────────────
       Boje — light zona
       ────────────────────────────────────────────────────────────────────── */
    --bg-light:        #f4f4f2;
    --bg-light-card:   #ebebea;
    --bg-light-rule:   #d6d6d4;
    --bg-light-subtle: #eeeeed;
    --bg-light-soft:   #fafaf8;       /* Home Tri stuba sekcija */
    --bg-paper:        #f7f6f3;       /* Variant C home — paper area (hero, alati) */
    --bg-paper-cool:   #eeebe2;       /* Hladniji paper — Usluge "Odakle počinjemo" */

    /* ──────────────────────────────────────────────────────────────────────
       Boje — dark zona
       ────────────────────────────────────────────────────────────────────── */
    --bg-dark:         #161614;
    --bg-dark-card:    #202020;
    --bg-dark-rule:    #2e2e2c;
    --bg-dark-subtle:  #1c1c1a;        /* Pet oblasti rada sekcija */
    --bg-footer:       #111110;

    /* ──────────────────────────────────────────────────────────────────────
       Tekst
       ────────────────────────────────────────────────────────────────────── */
    --fg-light:        #1e1e1c;
    --fg-light-strong: #1a1a18;       /* header brand name */
    --fg-light-deep:   #141412;       /* Home/section H2 */
    --fg-light-muted:  #4a4a48;
    --fg-light-mid:    #5a5a58;       /* signal P, services subhead */
    --fg-light-soft:   #6a6a68;       /* Tri stuba subhead */
    --fg-light-faint:  #7a7a78;
    --fg-light-haze:   #9a9a98;       /* pillar number, services outcome */

    --fg-dark:         #e8e8e6;
    --fg-dark-strong:  #f0ede8;       /* footer brand text, dark zone heading */
    --fg-dark-muted:   #a0a09e;
    --fg-dark-soft:    #b0ada8;       /* footer link default */
    --fg-dark-faint:   #626260;
    --fg-dark-faintest:#5a5754;       /* footer copyright */
    --fg-dark-mute2:   #8a8780;       /* footer tagline, pillar bottom note */
    --fg-dark-haze:    #6a6760;       /* footer mono kicker */

    /* ──────────────────────────────────────────────────────────────────────
       Brand
       ────────────────────────────────────────────────────────────────────── */
    --brand:           #9b1919;
    --brand-hover:     #7d1414;
    --brand-light:     #c0392b;
    --brand-faint:     rgba(155, 25, 25, 0.12);
    --brand-soft:      #9b3030;        /* OctoMark variant */

    /* ──────────────────────────────────────────────────────────────────────
       Pillar boje (Doc 04 sekundarne)
       ────────────────────────────────────────────────────────────────────── */
    --pillar-tech:     #3d6b8f;
    --pillar-people:   #5a7a4a;
    --pillar-process:  #7a6040;

    /* ──────────────────────────────────────────────────────────────────────
       Borders i overlay-i (rasuti hex iz SkyWork TSX-ova)
       ────────────────────────────────────────────────────────────────────── */
    --border-light:        #e0dedd;       /* fixed header bottom border */
    --border-light-soft:   #e8e6e3;       /* Tri stuba border-right */
    --border-dark:         #2a2a28;       /* Variant C footer grid border */
    --footer-divider:      rgba(255, 255, 255, 0.07);
    --footer-divider-soft: rgba(255, 255, 255, 0.05);

    /* ──────────────────────────────────────────────────────────────────────
       Tipografija
       ────────────────────────────────────────────────────────────────────── */
    --font-sans:    "Inter", system-ui, -apple-system, sans-serif;
    --font-mono:    "JetBrains Mono", "Courier New", monospace;
    --font-heading: "Inter", system-ui, sans-serif;

    /* ──────────────────────────────────────────────────────────────────────
       Spacing skala
       ────────────────────────────────────────────────────────────────────── */
    --space-1:  0.25rem;   /* 4px */
    --space-2:  0.5rem;    /* 8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.5rem;    /* 24px */
    --space-6:  2rem;      /* 32px */
    --space-7:  3rem;      /* 48px */
    --space-8:  4rem;      /* 64px */
    --space-9:  6rem;      /* 96px */
    --space-10: 8rem;      /* 128px — hero paddingTop */

    /* ──────────────────────────────────────────────────────────────────────
       Container širine
       ────────────────────────────────────────────────────────────────────── */
    --container:        75rem;     /* 1200px — content sekcije (ZastoCP, Usluge…) */
    --container-wide:   82.5rem;   /* 1320px — Home full-width sekcije */
    --container-narrow: 48rem;     /* 768px — page body čitljivost */

    /* ──────────────────────────────────────────────────────────────────────
       Header — final breathing pass (P10):
         desktop 86 → 90 (14px vazduha svaka strana logo-a — premium feel)
         mobile  72 → 76 (11px vazduha)
       ────────────────────────────────────────────────────────────────────── */
    --header-height:         90px;
    --header-height-mobile:  76px;
    --header-bg:             rgba(244, 244, 242, 0.92);
    --header-blur:           blur(12px);

    /* ──────────────────────────────────────────────────────────────────────
       Logo asset
       viewBox 1005.84 × 1359.36 — aspect ratio ≈ 1 : 1.351 (visok shield)
       Logo zadržan približno isti, blago smanjen (4px width) da bi imao
       12-14px vazduha gore i dole u novom header-u.
       Math: 86 - 62 = 24, ÷ 2 = 12px breathing svaka strana.
       ────────────────────────────────────────────────────────────────────── */
    --logo-header-w:         46px;          /* desktop, bilo 48 */
    --logo-header-h:         62px;          /* bilo 65 */
    --logo-header-w-mobile:  40px;          /* bilo 42 */
    --logo-header-h-mobile:  54px;          /* bilo 56 */
    --logo-footer-w:         72px;
    --logo-footer-h:         97px;

    /* ──────────────────────────────────────────────────────────────────────
       Section spacing
       ────────────────────────────────────────────────────────────────────── */
    --space-section:    5rem;          /* 80px — standardna sekcija */
    --space-section-lg: 7rem;          /* 112px — veće sekcije, hero */

    /* ──────────────────────────────────────────────────────────────────────
       Radius
       ────────────────────────────────────────────────────────────────────── */
    --radius-sm: 0.125rem;   /* 2px */
    --radius-md: 0.25rem;    /* 4px */
    --radius-lg: 0.375rem;   /* 6px */

    /* ──────────────────────────────────────────────────────────────────────
       Borders (token alias-i)
       ────────────────────────────────────────────────────────────────────── */
    --border-thin:   1px;
    --border-bold:   2px;
    --border-accent: 4px;

    /* ──────────────────────────────────────────────────────────────────────
       Z-index
       ────────────────────────────────────────────────────────────────────── */
    --z-header:       50;
    --z-mobile-menu: 100;

    /* ──────────────────────────────────────────────────────────────────────
       USTAV palete — Crvena Pilula. Semantičke role boja.
       Pravilo: crvena = signal, sve sive = warm-neutral porodica,
       sekundarne (amber/forest/steel) SAMO za kategorije/statuse.
       Source: Kanonska dokumenta/04 + handoff/source/cp-system.css.
       Trenutno koristi samo Variant C home (vch-*); inner pages ne diraju.
       ────────────────────────────────────────────────────────────────────── */
    --u-brand:    #9b1919;
    --u-paper:    #f7f6f3;
    --u-graphite: #161614;
    --u-cream:    #fafaf8;
    --u-sand:     #eceae4;
    --u-stone:    #d6d4ce;
    --u-slate:    #5a5754;
    --u-coal:     #2a2825;
    --u-ink:      #1a1a18;
    --u-amber:    #a6731f;
    --u-forest:   #4a5d3e;
    --u-steel:    #3a5570;
    --u-coral:    #d97757;  /* Promo kategorija (vendor / sponzorisani sadrzaj) */
}