/* ═══════════════════════════════════════════════════════════════════
   MetaKocka Design Tokens
   Single source of truth for the whole marketing site (MK + OM + FA)
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Neutrals (ink scale) ─────────────────────────────────────── */
  --c-ink-0:  #ffffff;
  --c-ink-1:  #fafbfc;
  --c-ink-2:  #f4f5f7;
  --c-ink-3:  #e6e8eb;
  --c-ink-4:  #d1d5db;
  --c-ink-5:  #9aa0a6;
  --c-ink-6:  #666766;
  --c-ink-7:  #47494a;
  --c-ink-8:  #2d2f31;
  --c-ink-9:  #231f20;

  /* ── MetaKocka CGP greens ─────────────────────────────────────── */
  --c-green-1: #eaf5e6;
  --c-green-2: #c9e3bf;
  --c-green-3: #9fce8e;
  --c-green-4: #81bc64;
  --c-green-5: #6aa951;
  --c-green-6: #519141;   /* primary MK green */
  --c-green-7: #407c31;
  --c-green-8: #2e5a23;

  /* ── MetaKocka yellows (accent only) ──────────────────────────── */
  --c-yellow-1: #fffbdd;
  --c-yellow-3: #fee76a;
  --c-yellow-5: #fddd00;
  --c-yellow-7: #b8960c;

  /* ── MetaKocka reds (alerts / changelog) ──────────────────────── */
  --c-red-3:  #fca5a3;
  --c-red-5:  #ee3126;
  --c-red-6:  #b62625;
  --c-red-7:  #8a1817;

  /* ── Order Management blues (REAL OM Figma palette) ─────────── */
  --c-blue-1: #eaf4ff;
  --c-blue-2: #c9e2ff;
  --c-blue-3: #98c5ff;
  --c-blue-4: #65ACFF;    /* primary OM blue — exact Figma value */
  --c-blue-5: #4694e5;
  --c-blue-6: #2c7bcc;
  --c-blue-7: #1f5fa3;
  --c-blue-8: #14457a;

  /* ── Fulfillment App purples (REAL FA Figma palette) ────────── */
  --c-purple-1: #faf0ff;
  --c-purple-2: #f1ddfa;
  --c-purple-3: #e2b8f3;
  --c-purple-4: #d089e8;
  --c-purple-5: #BD55D7;   /* primary FA purple — exact Figma value */
  --c-purple-6: #a13fbc;
  --c-purple-7: #7e2f95;
  --c-purple-8: #5a1d6c;

  /* ── App shell neutrals (real MK/OM/FA shell colors) ────────── */
  --c-shell-bar:    #2A2C2D;   /* dark top bar */
  --c-shell-rail:   #333536;   /* sidebar bg */
  --c-shell-rail-2: #3e4042;
  --c-shell-text:   #B7B9BA;   /* nav label */
  --c-shell-text-hi:#FCFEFF;
  --c-shell-border: #D3D5D6;
  --c-shell-surface:#F2F4F5;
  --c-shell-surface-2: #EDEFF0;

  /* ── Status colors (shared across MK/OM/FA UIs) ─────────────── */
  --c-status-ok:    #80BB64;
  --c-status-ok-bg: #e3f2da;
  --c-status-warn:  #FF8731;
  --c-status-warn-bg:#fff0e1;
  --c-status-err:   #ED3125;
  --c-status-err-bg:#fde0dd;
  --c-status-info:  #3DB0B0;
  --c-status-info-bg:#e0f3f3;

  /* ── MK module category colors (legacy heritage from old MK) ── */
  /* Used as subtle icon backgrounds on feature cards in MK pages only. */
  --c-mod-sales:    #519141;   /* SALES — green */
  --c-mod-purchase: #d97706;   /* PURCHASE — amber/orange */
  --c-mod-warehouse:#7c3aed;   /* WAREHOUSE — violet */
  --c-mod-crm:      #0891b2;   /* CRM — cyan */
  --c-mod-bank:     #115e59;   /* BANK — dark teal */
  --c-mod-cash:     #b62625;   /* DAVČNA BLAGAJNA — red */
  --c-mod-work:     #ea580c;   /* WORK ORDERS — orange */
  --c-mod-settings: #78716c;   /* SETTINGS — stone */

  /* ── Type ─────────────────────────────────────────────────────── */
  /* 'X Fallback' so metrično prilagojeni sistemski fonti (glej @font-face na
     dnu datoteke) — besedilo med nalaganjem Google Fonts obdrži skoraj enake
     mere, zato font swap ne premakne postavitve (CLS). */
  --font-display: 'Montserrat', 'Montserrat Fallback', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', 'Inter Fallback', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display:   clamp(2.75rem, 5.5vw, 4.25rem);  /* hero h1 */
  --fs-h1:        clamp(2.25rem, 4vw, 3.25rem);
  --fs-h2:        clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3:        clamp(1.25rem, 2vw, 1.5rem);
  --fs-h4:        1.125rem;
  --fs-body-lg:   1.125rem;
  --fs-body:      1rem;
  --fs-sm:        0.9375rem;
  --fs-xs:        0.8125rem;
  --fs-eyebrow:   0.75rem;

  --lh-tight:     1.1;
  --lh-snug:      1.25;
  --lh-base:      1.5;
  --lh-relaxed:   1.65;

  --tracking-tight: -0.025em;
  --tracking-wide:  0.06em;

  /* ── Space scale (4px grid) ──────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ── Radii ───────────────────────────────────────────────────── */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ── Shadows (Stripe-ish, multi-layer) ───────────────────────── */
  --sh-xs:    0 1px 2px rgba(15, 23, 42, 0.04);
  --sh-sm:    0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --sh-md:    0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --sh-lg:    0 12px 32px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04);
  --sh-xl:    0 24px 60px rgba(15, 23, 42, 0.10), 0 8px 24px rgba(15, 23, 42, 0.06);
  --sh-float: 0 50px 100px -20px rgba(50, 50, 93, 0.18), 0 30px 60px -30px rgba(0, 0, 0, 0.20);

  /* Coloured accent glows (used on hover, hero rings, etc.) */
  --glow-green:  0 8px 24px -8px rgba(81, 145, 65, 0.45);
  --glow-blue:   0 8px 24px -8px rgba(37, 99, 235, 0.45);
  --glow-purple: 0 8px 24px -8px rgba(124, 58, 237, 0.45);

  /* ── Motion ──────────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-base:   240ms;
  --dur-slow:   480ms;

  /* ── Layout ──────────────────────────────────────────────────── */
  --content-max: 1200px;
  --content-wide: 1320px;
  --content-narrow: 880px;
  --nav-h: 64px;
}/* ═══════════════════════════════════════════════════════════════════
   Brand contexts — switch the accent palette without touching markup.
   Add data-brand="om" or data-brand="fa" on <body> or any wrapper.
   Default = MetaKocka (green).
   ═══════════════════════════════════════════════════════════════════ */



:root,
[data-brand="mk"] {
  --c-accent:        var(--c-green-6);
  --c-accent-hover:  var(--c-green-7);
  --c-accent-soft:   var(--c-green-1);
  --c-accent-soft-2: var(--c-green-2);
  --c-accent-ink:    var(--c-green-8);
  --c-accent-rgb:    81, 145, 65;
  --glow-accent:     var(--glow-green);
  --grad-accent:     linear-gradient(135deg, var(--c-green-6) 0%, var(--c-green-4) 100%);
  --grad-hero:       linear-gradient(160deg, #f0f8ec 0%, #ffffff 60%);
}

@keyframes meshDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(2%, -3%) scale(1.05); }
  66%      { transform: translate(-3%, 2%) scale(0.97); }
}

[data-brand="om"] {
  --c-accent:        var(--c-blue-4);
  --c-accent-hover:  var(--c-blue-5);
  --c-accent-soft:   var(--c-blue-1);
  --c-accent-soft-2: var(--c-blue-2);
  --c-accent-ink:    var(--c-blue-7);
  --c-accent-rgb:    101, 172, 255;
  --glow-accent:     var(--glow-blue);
  --grad-accent:     linear-gradient(135deg, var(--c-blue-4) 0%, var(--c-blue-3) 100%);
  --grad-hero:       linear-gradient(160deg, #eaf4ff 0%, #ffffff 60%);
}

[data-brand="fa"] {
  --c-accent:        var(--c-purple-5);
  --c-accent-hover:  var(--c-purple-6);
  --c-accent-soft:   var(--c-purple-1);
  --c-accent-soft-2: var(--c-purple-2);
  --c-accent-ink:    var(--c-purple-7);
  --c-accent-rgb:    189, 85, 215;
  --glow-accent:     var(--glow-purple);
  --grad-accent:     linear-gradient(135deg, var(--c-purple-5) 0%, var(--c-purple-4) 100%);
  --grad-hero:       linear-gradient(160deg, #faf0ff 0%, #ffffff 60%);
}
/* ═══════════════════════════════════════════════════════════════════
   Metrično prilagojeni fallback fonti (CLS zaščita)
   Dokler se Google Fonts ne naložijo, brskalnik izriše Arial/Courier
   z override metrikami, ki posnemajo mere pravega fonta — besedilo se
   ob font swapu ne premakne. Vrednosti so standardne (capsize/next-font).
   ═══════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 107.40%;
  ascent-override: 90.20%;
  descent-override: 22.48%;
  line-gap-override: 0.00%;
}

@font-face {
  font-family: 'Montserrat Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 112.84%;
  ascent-override: 85.79%;
  descent-override: 22.25%;
  line-gap-override: 0.00%;
}

@font-face {
  font-family: 'JetBrains Mono Fallback';
  src: local('Courier New'), local('Courier');
  size-adjust: 100.00%;
  ascent-override: 102.00%;
  descent-override: 30.00%;
  line-gap-override: 0.00%;
}