/* ============================================================
   BRAINWORK — Design Tokens v3
   Dark default: clean white/cool-grey (ono sto je bilo light)
   Light toggle: Warm Linen (krema/lanen baza)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

:root {
  /* ── Colour: Warm Linen (isti za oba moda — body/section-offset) ── */
  --c-bg:           #F6F1E9;   /* warm linen — page bg */
  --c-bg-1:         #F0EAE0;   /* section--offset bg */
  --c-bg-2:         #E8E0D2;   /* section--offset-2 bg */
  --c-bg-3:         #DFD5C5;   /* deeper offset */
  /* kartice ostaju bijele: background: var(--c-white) = #FFFFFF */
  --c-bg-dark:      #1E1C18;   /* hero / CTA dark sections */
  --c-bg-dark-1:    #272420;   /* dark card surfaces */
  --c-bg-ink:       #13110E;   /* near-black for footer */

  /* Text */
  --c-text:         #111110;
  --c-text-dim:     #555350;
  --c-text-faint:   #999590;
  --c-text-light:   #F5F4F2;
  --c-text-light-dim: #B0ADA8;

  /* Accent — warm gold (nepromijenjen) */
  --c-gold:         #C9A96E;
  --c-gold-dark:    #A8885A;
  --c-gold-deep:    #8B6E42;
  --c-gold-light:   rgba(201,169,110,0.14);
  --c-gold-border:  rgba(201,169,110,0.30);
  --c-gold-bg:      rgba(201,169,110,0.08);

  /* Borders (light surfaces) */
  --c-border:       rgba(0,0,0,0.08);
  --c-border-mid:   rgba(0,0,0,0.13);
  --c-border-strong:rgba(0,0,0,0.20);

  /* Borders (dark sections) */
  --c-border-d:     rgba(240,237,230,0.10);
  --c-border-d-mid: rgba(240,237,230,0.18);

  /* Nav specific */
  --nav-bg: rgba(255,255,255,0.92);
  --nav-border: rgba(0,0,0,0.08);

  /* Utility */
  --c-white:        #FFFFFF;
  --c-overlay:      rgba(19,17,14,0.55);

  /* ── Typography ── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* Fluid type scale */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.82rem + 0.28vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-md:   clamp(1.125rem, 1rem    + 0.6vw,  1.375rem);
  --text-lg:   clamp(1.25rem,  1.1rem  + 0.75vw, 1.625rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(1.875rem, 1.2rem  + 2vw,    3rem);
  --text-3xl:  clamp(2.5rem,   1.5rem  + 3.5vw,  4.5rem);
  --text-hero: clamp(3rem,     1.5rem  + 5.5vw,  5.5rem);

  /* ── Spacing — 8pt grid ── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ── Layout ── */
  --max-w:         1200px;
  --max-w-narrow:  720px;
  --max-w-text:    640px;

  /* ── Borders & Radius ── */
  --radius-sm:  0.375rem;
  --radius-md:  0.625rem;
  --radius-lg:  1rem;
  --radius-xl:  1.5rem;
  --radius-full: 9999px;

  /* ── Shadows (cool-toned) ── */
  --shadow-sm:  0 1px 3px  rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10), 0 2px 4px  rgba(0,0,0,0.06);
  --shadow-lg:  0 12px 32px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.07);
  --shadow-xl:  0 24px 48px rgba(0,0,0,0.14), 0 8px 16px rgba(0,0,0,0.09);

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    360ms;
  --transition:  var(--dur-base) var(--ease-out);
}