/* KDP Lab design tokens · v1 · approved Step D (D1 colors, D2 logo)
   Single source of truth for the app. Claude Code reads this file in Step E. */
:root {
  /* Base: ink on paper (all UI) */
  --ink: #1C1C1A;          /* text, primary buttons */
  --ink-2: #3D3D39;        /* body text on white, nav items */
  --graphite: #55554F;     /* secondary text, labels (7:1 on white) */
  --muted: #75756F;        /* disabled text, future-version labels */
  --stone: #D9D9D5;        /* borders */
  --stone-2: #B8B8B3;      /* dashed placeholders, soft borders */
  --mist: #E6E6E2;         /* active nav item, chips, tracks */
  --paper: #F3F3F1;        /* page background */
  --surface: #FFFFFF;      /* cards, inputs, dialogs */
  --surface-2: #F8F8F6;    /* side panels, tree background */

  /* Functional: meaning only, small areas, always with icon + word */
  --danger: #B42318;   --danger-bg: #FDECEA;   /* 6.6:1 on white */
  --success: #1E7A46;  --success-bg: #E7F4EC;  /* 5.4:1 on white */
  --warning: #8A5A00;  --warning-bg: #FDF3DC;  /* 5.9:1 on white */

  /* Brand: logo and landing page ONLY, never inside the app UI */
  --brand-navy: #14213D;
  --brand-blue: #2E6AE6;
  --wordmark-gap: 2px;     /* margin before "Ink" in the NicheInk wordmark (design 40b), never a space */

  /* Type */
  --font-ui: "IBM Plex Sans", system-ui, sans-serif;
  --font-label: "IBM Plex Mono", ui-monospace, monospace;
  --font-read: "Source Serif 4", Georgia, serif;   /* editor only */
  --text-xs: 12px;  --text-sm: 13px;  --text-md: 14px;  --text-base: 15px;
  --text-lg: 16px;  --text-xl: 18px;  --text-2xl: 22px; --text-3xl: 28px; --text-4xl: 30px;
  --text-read: 18px; --leading-read: 1.75;

  /* Space (4px grid) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;

  /* Shape */
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px;
  --radius-2xl: 16px; --radius-pill: 999px;
  --control-h: 44px;       /* minimum touch target */
  --shadow-menu: 0 8px 24px rgba(28, 28, 26, 0.12);  /* menus only */
  --shadow-card-hover: 0 6px 18px rgba(28, 28, 26, 0.08);
  --shadow-cover: inset 3px 0 0 rgba(0, 0, 0, 0.12), 0 1px 2px rgba(28, 28, 26, 0.18);
  --shadow-dialog: 0 24px 60px rgba(28, 28, 26, 0.25);
  --overlay: rgba(28, 28, 26, 0.55);   /* dialog backdrop */

  /* Interaction states (design 07) */
  --ink-hover: #33332F;    /* primary button hover */
  --ink-press: #000000;    /* primary button pressed */
  --on-ink-muted: #C9C9C4; /* secondary text on an ink background */
}

/* Landing theme: landing page and public auth pages ONLY (brand navy and blue allowed here).
   Light values come from the base palette. Dark switches with the OS setting. */
:root {
  --lp-bg: var(--paper);
  --lp-text: var(--ink);            /* pill links */
  --lp-heading: var(--brand-navy);  /* h1, feature titles, chip text, icons */
  --lp-text-2: var(--graphite);     /* lead text, notes, footer */
  --lp-border: var(--stone);
  --lp-chip: var(--mist);           /* status chip, icon tiles */
  --lp-accent: var(--brand-blue);   /* status dot, "Ink" */
  --lp-cta-bg: var(--brand-navy);
  --lp-cta-text: #FFFFFF;
  --lp-logo: var(--brand-navy);
  --lp-logo-cut: #FFFFFF;
  --lp-focus: var(--ink);

  /* Public auth pages (sign in, sign up, reset) */
  --lp-field-bg: var(--surface);
  --lp-field-border: var(--stone);
  --lp-btn-bg: var(--ink);          /* primary action */
  --lp-btn-text: #FFFFFF;
  --lp-btn2-bg: var(--surface);     /* Google, Resend */
  --lp-link: var(--brand-navy);
  --lp-icon-tile: var(--mist);
  --lp-panel: var(--brand-navy);    /* right panel with covers */
  --lp-panel-text: #FFFFFF;
  --lp-panel-text-2: #C9D3E8;
  --lp-danger: var(--danger);   --lp-danger-bg: var(--danger-bg);
  --lp-success: var(--success); --lp-success-bg: var(--success-bg);
}
@media (prefers-color-scheme: dark) {
  :root {
    --lp-bg: #0C1424;
    --lp-text: #F3F3F1;
    --lp-heading: #FFFFFF;
    --lp-text-2: #AEB8CC;
    --lp-border: #26324F;
    --lp-chip: #1C2A4A;
    --lp-accent: #7FA6F2;
    --lp-cta-bg: #7FA6F2;
    --lp-cta-text: #0C1424;
    --lp-logo: #FFFFFF;
    --lp-logo-cut: #0C1424;
    --lp-focus: #FFFFFF;

    --lp-field-bg: #0C1424;
    --lp-field-border: #34425F;
    --lp-btn-bg: #7FA6F2;
    --lp-btn-text: #0C1424;
    --lp-btn2-bg: var(--brand-navy);
    --lp-link: #7FA6F2;
    --lp-icon-tile: #1C2A4A;
    --lp-panel: var(--brand-navy);
    --lp-panel-text: #FFFFFF;
    --lp-panel-text-2: #AEB8CC;
    --lp-danger: #F29A92;  --lp-danger-bg: #3A1614;
    --lp-success: #7FD1A2; --lp-success-bg: #12301F;
  }
}