/* ============================================================
   KOBBLE DESIGN SYSTEM — Tokens
   Brand: Australian fintech/banking infrastructure platform
   Two surfaces share these tokens:
     1. Marketing site (Next.js, Tailwind v4)  — light + dark themes
     2. Operator dashboard (Mantine, React)    — light only
   ============================================================ */

/* -------------------------------------------------------------
   FONTS
   ------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Raleway:wght@300;400;500;600;700&family=Source+Serif+4:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ----------------------------------------------------------
     CORE BRAND COLORS (raw, source of truth)
     ----------------------------------------------------------
     Kobble's identity centers on two greens and one cyan:
       - Deep green  #00574E   (primary on light, logo wordmark)
       - Bright cyan #02C3DE   (primary on dark, accent CTA)
       - Lime spark  #C8F025   (icon tile, energetic accent)
     Use deep-green for trust / authority, cyan for action,
     lime sparingly as a punctuation color.                       */
  --kobble-deep-green: #00574E;
  --kobble-deep-green-dark: #003D37;     /* hover / pressed       */
  --kobble-cyan: #02C3DE;
  --kobble-cyan-bright: #5BD9EC;         /* hover on dark         */
  --kobble-teal-bright: #008C7E;         /* dashboard active/link */
  --kobble-lime: #C8F025;                /* logo-tile accent      */
  --kobble-ink: #0E1F1C;                 /* near-black, deep      */
  --kobble-paper: #FAFBF9;               /* warm white background */

  /* ----------------------------------------------------------
     LIGHT SURFACE (marketing-site default + dashboard)
     ---------------------------------------------------------- */
  --background: oklch(0.98 0.002 155);     /* #FAFBF9-ish        */
  --foreground: oklch(0.13 0.02 165);      /* near-black, slight green tint */
  --card: #FFFFFF;
  --card-foreground: oklch(0.13 0.02 165);
  --popover: #FFFFFF;
  --popover-foreground: oklch(0.13 0.02 165);
  --primary: #00574E;                       /* deep green         */
  --primary-foreground: #FFFFFF;
  --secondary: oklch(0.65 0.15 195);        /* teal-cyan          */
  --secondary-foreground: oklch(0.13 0.02 165);
  --muted: oklch(0.96 0.005 155);
  --muted-foreground: oklch(0.45 0.02 165); /* ≈ #6B7280 dashboard grey */
  --accent: #C8F025;                        /* lime spark         */
  --accent-foreground: #0E1F1C;
  --destructive: #E74A49;                   /* dashboard red      */
  --destructive-foreground: #FFFFFF;
  --warning:    #F0AD4E;                    /* dashboard amber    */
  --success:    #34AC12;                    /* dashboard green    */
  --border: oklch(0.91 0.005 155);          /* ≈ #E9ECEF          */
  --input: oklch(0.91 0.005 155);
  --ring: #00574E;

  /* Dashboard-specific tokens (Mantine palette mapping) */
  --dash-bg: #F9F9F9;
  --dash-card: #FFFFFF;
  --dash-topbar: #252628;                  /* dark app top bar     */
  --dash-table-head: #252628;              /* dark table head row  */
  --dash-text: #292929;
  --dash-text-soft: #6B7280;
  --dash-text-muted: #666666;
  --dash-divider: #E9ECEF;
  --dash-row-active: #4DC7AF;               /* selected nav row   */
  --dash-row-hover: #F3F4F6;

  /* ----------------------------------------------------------
     CHART / DATA-VIZ
     ---------------------------------------------------------- */
  --chart-1: #00574E;
  --chart-2: oklch(0.65 0.15 195);
  --chart-3: #C8F025;
  --chart-4: oklch(0.55 0.10 180);
  --chart-5: oklch(0.75 0.12 150);

  /* ----------------------------------------------------------
     EFFECTS
     ---------------------------------------------------------- */
  --glow-primary: oklch(0.35 0.08 170 / 0.15);
  --glow-secondary: oklch(0.65 0.15 195 / 0.15);
  --glow-accent: oklch(0.88 0.18 110 / 0.20);
  --watermark-fill: #D4DCDA;

  /* ----------------------------------------------------------
     RADII (deliberately small — flat, enterprise)
     Marketing radius is *tiny* (2.8px) for a precise, technical
     feel. Cards override to lg/2xl when warmth is wanted.
     ---------------------------------------------------------- */
  --radius:    0.175rem;     /* 2.8px — base                    */
  --radius-sm: calc(var(--radius) - 0.0625rem);
  --radius-md: calc(var(--radius) + 0.0625rem);
  --radius-lg: 0.5rem;       /* 8px  — buttons, inputs          */
  --radius-xl: 0.75rem;      /* 12px — small cards              */
  --radius-2xl: 1rem;        /* 16px — feature cards            */
  --radius-3xl: 1.5rem;      /* 24px — hero / step cards        */
  --radius-pill: 9999px;

  /* ----------------------------------------------------------
     SHADOWS (subtle, enterprise)
     ---------------------------------------------------------- */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05), 0 1px 3px 0 rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.06);
  --shadow-lg: 0 10px 24px -4px rgb(0 0 0 / 0.08), 0 4px 8px -4px rgb(0 0 0 / 0.06);
  --shadow-xl: 0 20px 40px -8px rgb(0 0 0 / 0.10), 0 8px 16px -8px rgb(0 0 0 / 0.08);
  --shadow-primary-lg: 0 10px 30px -6px oklch(0.35 0.08 170 / 0.30);

  /* ----------------------------------------------------------
     SPACING SCALE (4px base — Tailwind-aligned)
     ---------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ----------------------------------------------------------
     TYPOGRAPHY
     ----------------------------------------------------------
     Three families, distinct jobs:
       - Montserrat  — display / headings (font-display)
       - Raleway     — body sans (font-sans, primary UI)
       - Source Serif 4 — editorial / pull-quotes only
       - JetBrains Mono — code, ledger numbers
     Numbers in the dashboard use Raleway with tabular-nums.       */
  --font-sans:    'Raleway', system-ui, -apple-system, sans-serif;
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-serif:   'Source Serif 4', Georgia, serif;
  --font-mono:    'JetBrains Mono', 'Geist Mono', ui-monospace, monospace;

  /* Type scale — modular, designed for 1440-wide marketing pages
     and 1280-wide dashboards. Headline sizes drop on mobile.       */
  --text-xs:   0.75rem;   /* 12 — labels, badges                */
  --text-sm:   0.875rem;  /* 14 — UI body                       */
  --text-base: 1rem;      /* 16 — paragraph                     */
  --text-lg:   1.125rem;  /* 18 — lead paragraph                */
  --text-xl:   1.25rem;   /* 20 — card title sm                 */
  --text-2xl:  1.5rem;    /* 24 — card title                    */
  --text-3xl:  1.875rem;  /* 30 — section eyebrow + h3          */
  --text-4xl:  2.25rem;   /* 36 — h2                            */
  --text-5xl:  3rem;      /* 48 — hero h1 mobile                */
  --text-6xl:  3.75rem;   /* 60 — hero h1 desktop               */
  --text-7xl:  4.5rem;    /* 72 — display                       */

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;   /* display headlines              */
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;   /* eyebrows / kicker text         */
}

.dark {
  /* Dark theme — marketing site only. Cyan replaces deep-green
     as primary, on a deep green-black background. The combination
     reads as "infrastructure mode": charts, dev console, technical. */
  --background: oklch(0.14 0.015 165);
  --foreground: oklch(0.92 0.01 165);
  --card: oklch(0.18 0.018 165);
  --card-foreground: oklch(0.92 0.01 165);
  --popover: oklch(0.16 0.016 165);
  --popover-foreground: oklch(0.92 0.01 165);
  --primary: #02C3DE;
  --primary-foreground: oklch(0.13 0.02 165);
  --secondary: #C8F025;
  --secondary-foreground: oklch(0.13 0.02 165);
  --muted: oklch(0.22 0.02 165);
  --muted-foreground: oklch(0.65 0.02 165);
  --accent: #02C3DE;
  --accent-foreground: oklch(0.13 0.02 165);
  --border: oklch(0.25 0.02 165);
  --input: oklch(0.25 0.02 165);
  --ring: #02C3DE;
  --glow-primary:   oklch(0.7502 0.1306 212.17 / 0.18);
  --glow-secondary: oklch(0.88 0.18 110 / 0.12);
  --glow-accent:    oklch(0.7502 0.1306 212.17 / 0.25);
  --watermark-fill: oklch(0.42 0.025 165);
}

/* ============================================================
   BASE STYLES + UTILITIES (used in preview cards)
   ============================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display heading family */
.h-display, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--foreground);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.text-gradient-primary {
  background: linear-gradient(135deg, #02C3DE, #C8F025);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tabular { font-variant-numeric: tabular-nums; }

/* preview-card chrome (used by every preview/*.html) */
.dsm-card {
  font-family: var(--font-sans);
  color: var(--foreground);
  background: var(--background);
  padding: 32px;
  min-height: 100vh;
}
.dsm-card h1 {
  font-size: var(--text-3xl);
  margin-bottom: 4px;
}
.dsm-card .lede {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  margin-bottom: 28px;
}
.dsm-section + .dsm-section { margin-top: 36px; }
.dsm-section-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 12px;
}