/* ============================================================
   WAINE Platform — Design Tokens (admin.waine.se)
   Internal tool. Dark cinematic app shell · light A4 documents.
   Anchored in brand-black #0a0a0a + WAINE coral.
   All values map 1:1 to CSS custom properties.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Familjen Grotesk', system-ui, -apple-system, sans-serif; /* headings, brand, numbers-as-display */
  --font-ui:      'Inter', system-ui, -apple-system, sans-serif;            /* body, labels, controls */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;     /* amounts, IDs, dates, code */

  /* ---------- TYPE SCALE (1.25 major third, base 14) ---------- */
  --fs-50:  11px;   /* micro / table caption / kbd */
  --fs-100: 12px;   /* caption, meta */
  --fs-200: 13px;   /* dense UI label */
  --fs-300: 14px;   /* body / control base */
  --fs-400: 17px;   /* lead / card title */
  --fs-500: 22px;   /* h3 / section */
  --fs-600: 27px;   /* h2 / page title */
  --fs-700: 34px;   /* h1 */
  --fs-800: 43px;   /* display */
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.6;
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.10em;

  /* ============================================================
     DARK APP SHELL — neutrals (very slightly warm)
     ============================================================ */
  --ink-900: #0a0a0a;   /* app background — brand black */
  --ink-850: #0d0d0e;   /* sidebar / sunken rail */
  --ink-800: #111113;   /* panel base */
  --ink-750: #161618;   /* row / inset field */
  --ink-700: #1c1c1f;   /* card surface */
  --ink-650: #232327;   /* raised / hover surface */
  --ink-600: #2c2c31;   /* strong fill / active */
  --ink-550: #3a3a41;   /* solid border on dark */

  /* text on dark */
  --text-1: #f4f4f3;    /* primary (warm white) */
  --text-2: #a6a6a4;    /* secondary */
  --text-3: #717170;    /* tertiary / muted */
  --text-4: #4c4c4b;    /* faint / disabled */

  /* hairlines on dark */
  --line-1: rgba(255,255,255,0.06);
  --line-2: rgba(255,255,255,0.10);
  --line-3: rgba(255,255,255,0.16);

  /* ---------- ACCENT — WAINE coral (primary action + brand) ---------- */
  --accent:        #FF5F61;
  --accent-hover:  #FF7375;
  --accent-press:  #E54D4F;
  --accent-ink:    #ffffff;                 /* text on accent */
  --accent-soft:   rgba(255,95,97,0.12);    /* tinted fill */
  --accent-softer: rgba(255,95,97,0.06);
  --accent-line:   rgba(255,95,97,0.34);    /* tinted border */
  --accent-text:   #FF8284;                 /* coral text on dark (legible) */

  /* ---------- SEMANTIC (status) ---------- */
  --success: #3ECF8E;  --success-soft: rgba(62,207,142,0.13);  --success-line: rgba(62,207,142,0.32);
  --warning: #E5A23D;  --warning-soft: rgba(229,162,61,0.13);  --warning-line: rgba(229,162,61,0.32);
  --danger:  #E5484D;  --danger-soft:  rgba(229,72,77,0.13);   --danger-line:  rgba(229,72,77,0.32);
  --info:    #6AA5D8;  --info-soft:    rgba(106,165,216,0.13); --info-line:    rgba(106,165,216,0.32);
  --neutral-soft: rgba(255,255,255,0.07);

  /* ============================================================
     LIGHT DOCUMENT SURFACE — A4 paper inside the builders
     ============================================================ */
  --paper:        #ffffff;
  --paper-2:      #f6f6f4;   /* subtle panel / table zebra on paper */
  --paper-3:      #efefec;   /* totals row */
  --paper-ink-1:  #1a1a1a;   /* document primary text */
  --paper-ink-2:  #565654;   /* document secondary */
  --paper-ink-3:  #8c8c89;   /* document muted / labels */
  --paper-line:   #e6e6e2;   /* document hairline */
  --paper-line-2: #d4d4cf;   /* document stronger rule */
  --paper-accent: #E54D4F;   /* coral on white (deeper for contrast) */

  /* ---------- SPACING (4px base) ---------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-7: 28px;  --sp-8: 32px;
  --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* ---------- RADIUS (8px default) ---------- */
  --r-sm: 6px;   --r: 8px;   --r-md: 10px;  --r-lg: 12px;  --r-xl: 16px;  --r-full: 999px;

  /* ---------- SHADOWS (soft, dark) ---------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.45);
  --shadow-2: 0 4px 14px rgba(0,0,0,0.45);
  --shadow-3: 0 14px 36px rgba(0,0,0,0.55);
  --shadow-pop: 0 18px 52px rgba(0,0,0,0.62);
  --shadow-paper: 0 12px 40px rgba(0,0,0,0.5);  /* the white doc floating on dark */
  --ring-accent: 0 0 0 3px rgba(255,95,97,0.28);   /* focus ring */
  --ring-focus:  0 0 0 3px rgba(255,255,255,0.14);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
}