/* Shero / Smart Money Women — Webfonts
   Primary: Montserrat (self-hosted, headings + UI)
   Secondary: Inter (Google Fonts, body text) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@font-face{font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/Montserrat-Light.ttf') format('truetype')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/Montserrat-Regular.ttf') format('truetype')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/Montserrat-Medium.ttf') format('truetype')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/Montserrat-SemiBold.ttf') format('truetype')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/Montserrat-Bold.ttf') format('truetype')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/Montserrat-ExtraBold.ttf') format('truetype')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:900;font-display:swap;src:url('assets/fonts/Montserrat-Black.ttf') format('truetype')}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/Montserrat-Italic.ttf') format('truetype')}


/* Shero / Smart Money Women — Color tokens
   From Brand Guidelines 2026 §04 Barvna paleta.
   Black is NEVER used — the darkest brand tone is Dark Blue (#006B9A). */
:root{
  /* ---- Base brand blues ---- */
  --shero-blue: #0BB3E7;        /* ★ Primary blue — RGB 11·179·231 */
  --shero-blue-2: #0891C4;      /* Mid blue — RGB 8·145·196 */
  --shero-blue-dark: #006B9A;   /* Dark blue — RGB 0·107·154 · used in place of black */

  /* ---- Accents ---- */
  --shero-gold: #DEBA45;        /* Gold (Pantone 4007 C) — RGB 222·186·69 */
  --shero-magenta: #FF007D;     /* ★ Magenta accent — RGB 255·0·125 · details only */
  --shero-white: #FFFFFF;

  /* ---- Extended neutrals (derived, for surfaces & text) ---- */
  --shero-ink: #1B2A33;         /* Deepest neutral for dense text on light (cool near-black, never pure #000) */
  --shero-body: #3A3A3A;        /* Body text color (guidelines) */
  --shero-gray: #5A6A72;        /* Caption / muted gray (guidelines) */
  --shero-gray-2: #8B98A0;      /* Placeholder / disabled text */
  --shero-line: #E4EAEE;        /* Hairline borders, dividers */
  --shero-surface: #F4F8FB;     /* Tinted light surface (blue-cast) */
  --shero-surface-2: #FBFCFD;   /* Near-white surface */
  --shero-magenta-tint: #FFEAF3;/* Soft magenta wash for notes/badges */
  --shero-gold-tint: #FBF3DA;   /* Soft gold wash */
  --shero-blue-tint: #E4F6FC;   /* Soft blue wash */

  /* ---- Semantic aliases ---- */
  --color-primary: var(--shero-blue);
  --color-primary-hover: var(--shero-blue-2);
  --color-primary-press: var(--shero-blue-dark);
  --color-accent: var(--shero-magenta);
  --color-highlight: var(--shero-gold);

  --text-heading: var(--shero-blue-dark);
  --text-body: var(--shero-body);
  --text-muted: var(--shero-gray);
  --text-on-primary: var(--shero-white);
  --text-on-dark: var(--shero-white);
  --text-accent: var(--shero-magenta);
  --text-link: var(--shero-blue-2);
  --text-link-hover: var(--shero-blue-dark);

  --surface-page: var(--shero-white);
  --surface-card: var(--shero-white);
  --surface-muted: var(--shero-surface);
  --surface-premium: var(--shero-blue-dark); /* white-on-dark-blue premium cards */
  --surface-brand: var(--shero-blue);

  --border-subtle: var(--shero-line);
  --border-strong: var(--shero-blue-dark);

  /* ---- Status (kept within brand hues) ---- */
  --color-success: #0F9D6B;
  --color-warning: var(--shero-gold);
  --color-error: var(--shero-magenta);
  --color-info: var(--shero-blue-2);
}


/* Shero / Smart Money Women — Typography tokens
   From Brand Guidelines 2026 §05 Tipografija.
   Montserrat = headings & UI · Inter = body · Arial Bold = fallback. */
:root{
  --font-display: 'Montserrat', 'Arial', sans-serif;   /* headings, UI, buttons */
  --font-body: 'Inter', 'Arial', sans-serif;           /* running body copy */

  /* Weights */
  --fw-light: 300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */
  --fw-black: 900; /* @kind font */

  /* Type scale (px) — H1 48–72, stepping down. */
  --fs-display: 72px;   /* hero / oversized */
  --fs-h1: 56px;        /* H1 Naslov — Montserrat ExtraBold, CAPS */
  --fs-h2: 34px;        /* H2 Sekcija — Montserrat Bold, CAPS */
  --fs-h3: 22px;        /* H3 Podnaslov — Montserrat SemiBold, Title Case */
  --fs-lg: 18px;        /* lead paragraph */
  --fs-body: 16px;      /* body — Inter Regular */
  --fs-sm: 14px;        /* small body */
  --fs-caption: 12px;   /* caption / eyebrow — Montserrat, CAPS, tracked */
  --fs-micro: 11px;

  /* Line heights (1.4–1.6 for body, tight for display) */
  --lh-tight: 1.05; /* @kind other */
  --lh-heading: 1.15; /* @kind other */
  --lh-snug: 1.35; /* @kind other */
  --lh-body: 1.55; /* @kind other */

  /* Letter spacing — CAPS labels are tracked out */
  --ls-heading: -0.01em; /* @kind other */
  --ls-caps: 0.14em; /* @kind other */
  --ls-button: 0.06em; /* @kind other */
}


/* Shero / Smart Money Women — Spacing & layout tokens
   From Brand Guidelines 2026 §08 Grid sistem & razmiki. Base unit = 8px. */
:root{
  --space-0: 0;
  --space-1: 4px;    /* 0.5× */
  --space-2: 8px;    /* ★ base unit */
  --space-3: 16px;   /* 2× — between elements */
  --space-4: 24px;   /* 3× */
  --space-5: 32px;   /* 4× — between sections */
  --space-6: 40px;   /* 5× */
  --space-7: 48px;   /* 6× */
  --space-8: 64px;   /* 8× */
  --space-9: 80px;   /* 10× */
  --space-10: 96px;  /* 12× */

  --box-padding-min: 12px;   /* min padding in boxes (1.5× base) */
  --gutter-digital: 24px;    /* digital margins 16–24px */
  --measure: 70ch;           /* max column width for readability */

  --container-max: 1200px;
  --container-narrow: 760px;
}


/* Shero / Smart Money Women — Radii, shadows, motion
   Rounded corners + subtle shadows are core to the premium, soft brand feel. */
:root{
  /* Corner radii — soft, generous */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;    /* default card radius */
  --radius-lg: 24px;    /* large cards / panels */
  --radius-xl: 32px;
  --radius-pill: 999px; /* CTA buttons, chips */

  /* Shadows — soft, blue-cast, never harsh */
  --shadow-xs: 0 1px 2px rgba(0,107,154,0.06);
  --shadow-sm: 0 2px 8px rgba(0,107,154,0.08);
  --shadow-md: 0 8px 24px rgba(0,107,154,0.10);
  --shadow-lg: 0 16px 48px rgba(0,107,154,0.14);
  --shadow-focus: 0 0 0 3px rgba(11,179,231,0.35);

  /* Decorative accents */
  --gold-bar-height: 4px; /* @kind spacing */
  --hairline: 1px solid var(--shero-line); /* @kind other */

  /* Motion — elegant, only where it improves UX */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur: 220ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */
}