/* Blobby Pro design tokens. The single source of truth for color, type, space, radius, depth and motion.
   Keep tokens.json and tailwind.theme.css in sync with this file. App code uses the semantic tokens
   (second block), never the raw palette, so a palette change is one edit here. */

:root {
  /* ---------- raw palette ---------- */

  /* Graphite: the dark chrome (tab bar, sidebar, tool rail, hero cards) */
  --graphite-950: #0c0c0f;
  --graphite-900: #111114;
  --graphite-850: #141418;
  --graphite-800: #1a1a1e;
  --graphite-700: #25252a;
  --graphite-600: #36363d;
  --graphite-400: #94949c;
  --graphite-200: #ededf0;

  /* Ruby: the Blobby signature, in small doses only. Comment pins, AI activity, hero dot, mascot glow */
  --ruby-300: #ff9aaa; /* ruby text on graphite (AI pill) */
  --ruby-400: #ff6f85; /* ruby dots on graphite */
  --ruby-500: #c22d45; /* base */

  /* Cool neutrals: light surfaces */
  --neutral-0: #ffffff;
  --neutral-25: #f6f7f8;
  --neutral-50: #f4f5f7;
  --neutral-75: #f2f3f5;
  --neutral-100: #eceef1;
  --neutral-150: #e4e5e9;
  --neutral-200: #e0e3e7;
  --neutral-300: #d3d5da;
  --neutral-500: #8d8d95;
  --neutral-600: #64646b;
  --neutral-800: #36363b;
  --neutral-950: #111114;

  /* Chrome: silver for the mascot, PRO mark and chips on graphite */
  --chrome-hi: #ffffff;
  --chrome-mid: #e6e8eb;
  --chrome-lo: #b7bcc4;
  --chrome-shade: #6f757e;

  /* Status. Selection blue is only for the canvas selection box, never for UI chrome. */
  --blue-500: #4f74e8;
  --green-600: #0b7a4b;
  --green-400: #5fd38d;
  --red-700: #c42b2b;

  /* ---------- semantic tokens (use these) ---------- */

  --bg-app: var(--graphite-900);
  --bg-chrome: var(--graphite-950);          /* tab bar */
  --bg-sidebar: linear-gradient(180deg, var(--graphite-850) 0%, #101013 100%);
  --bg-surface: var(--neutral-0);            /* cards, panel top, menus, modals */
  --bg-panel: var(--neutral-50);             /* design panel background */
  --bg-home: linear-gradient(180deg, #f5f6f8 0%, #eaecef 100%);
  --bg-canvas: var(--neutral-200);
  --bg-input: var(--neutral-75);
  --bg-subtle: var(--neutral-100);           /* segmented controls, view toggle */
  --bg-hover-dark: rgba(255, 255, 255, .07); /* hover/active rows on graphite */
  /* The editor app's tone (ADR-0012) has a light and a dark version: the --ui-* tokens at the end of this file. */

  --text: var(--neutral-950);
  --text-2: var(--neutral-800);
  --text-muted: var(--neutral-600);          /* secondary text, 5.9:1 on white */
  --text-subtle: var(--neutral-500);         /* labels, placeholders only (3.3:1, not for body text) */
  --text-on-dark: var(--graphite-200);
  --text-on-dark-muted: var(--graphite-400);
  --text-on-primary: #ffffff;

  --border: var(--neutral-150);
  --border-strong: var(--neutral-300);
  --border-card: rgba(17, 17, 20, .06);
  --hairline-dark: rgba(255, 255, 255, .07); /* borders on graphite */

  /* Primary actions are monochrome: graphite on light surfaces, silver on graphite. */
  --primary: #16161a;
  --primary-hover: #26262c;
  --primary-border: #000000;
  --primary-on-dark: var(--graphite-200);   /* active tool / mode chip on graphite */
  --focus-ring: 0 0 0 3px rgba(17, 17, 20, .1);
  --focus-border: var(--neutral-950);

  /* The ruby signature */
  --signature: var(--ruby-500);
  --signature-on-dark: var(--ruby-300);
  --signature-dot-on-dark: var(--ruby-400);
  --signature-soft: rgba(194, 45, 69, .16);  /* AI pill background on graphite */
  --signature-glow: rgba(194, 45, 69, .3);   /* mascot glow, hero dot halo */

  --chrome-fill: linear-gradient(180deg, var(--chrome-hi) 0%, var(--chrome-mid) 48%, var(--chrome-lo) 100%);
  --selection: var(--blue-500);
  --component: #8366ea;                /* components and instances in the editor */
  --success: var(--green-600);
  --success-on-dark: var(--green-400);
  --danger: var(--red-700);

  /* ---------- type ---------- */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-overline: 600 10.5px/1.4 var(--font-sans); /* uppercase, tracking .09em */
  --text-caption: 400 11.5px/1.45 var(--font-sans);
  --text-small: 400 12.5px/1.45 var(--font-sans);
  --text-body: 400 13px/1.45 var(--font-sans);      /* app base size */
  --text-lead: 400 14.5px/1.55 var(--font-sans);
  --text-title: 600 16px/1.3 var(--font-sans);
  --text-heading: 600 24px/1.2 var(--font-sans);    /* tracking -.03em */
  --text-display: 600 38px/1.08 var(--font-sans);   /* tracking -.035em */
  --text-code: 400 11.5px/1.5 var(--font-mono);

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

  /* ---------- radius ---------- */
  --radius-xs: 5px;    /* tags, PRO chip */
  --radius-sm: 7px;    /* buttons, menu rows, nav rows */
  --radius-md: 8px;    /* inputs, icon buttons */
  --radius-lg: 12px;   /* panel cards, menus, threads */
  --radius-xl: 16px;   /* project cards, modals */
  --radius-2xl: 22px;  /* hero */
  --radius-full: 999px;

  /* ---------- depth ---------- */
  --shadow-xs: 0 1px 1px rgba(17, 17, 20, .05);
  --shadow-card: 0 1px 1px rgba(17, 17, 20, .03), 0 2px 8px rgba(17, 17, 20, .03);
  --shadow-lift: 0 1px 1px rgba(17, 17, 20, .04), 0 2px 6px rgba(17, 17, 20, .05), 0 12px 32px rgba(17, 17, 20, .07);
  --shadow-hover: 0 2px 4px rgba(17, 17, 20, .05), 0 20px 44px rgba(17, 17, 20, .12);
  --shadow-popover: 0 1px 2px rgba(17, 17, 20, .06), 0 16px 48px rgba(17, 17, 20, .18);
  --shadow-modal: 0 0 0 1px rgba(17, 17, 20, .06), 0 30px 80px rgba(17, 17, 20, .3);
  --shadow-primary: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(17, 17, 20, .2);
  --shadow-chip-dark: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, .4); /* silver chips on graphite */
  --highlight-top: inset 0 1px 0 rgba(255, 255, 255, .08); /* top edge light on graphite */

  /* ---------- motion ---------- */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --duration-fast: 120ms;  /* hover, focus */
  --duration-base: 180ms;  /* lift, toggles */
  --duration-slow: 280ms;  /* panels, modals */
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; }
}

/* The editor app's tone (ADR-0012): one surface for the tab bar, panels and Home's sidebar, a step darker for the
   canvas, the content surface for Home's main area; neutral greys without a tint, in Paper's spirit (stage 14.3), in a
   light and a dark version that follow the system (the app's Appearance setting drives it). Keep in sync with
   tailwind.theme.css and tokens.json. */
:root {
  --ui: #f4f4f4;
  --ui-raised: #eaeaea;
  --ui-stage: #e6e6e6;
  --ui-content: #ffffff;
  --ui-fg: #1c1c1c;
  --ui-muted: #666666;
  --ui-subtle: #888888;
  --ui-line: #e2e2e2;
  --ui-hover: rgba(0, 0, 0, .045);
  --ui-selected: #ffffff;
  --ui-primary: #1c1c1c;
  --ui-on-primary: #ffffff;
  --ui-float: #ffffff;
  --ui-code-tag: #2456c7;
  --ui-code-attr: #7a3e9d;
  --ui-code-string: #0b7a4b;
  --ui-code-number: #a3530b;
  --ui-code-comment: #8d8d95;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ui: #262626;
    --ui-raised: #303030;
    --ui-stage: #1d1d1d;
    --ui-content: #212121;
    --ui-fg: #e8e8e8;
    --ui-muted: #a3a3a3;
    --ui-subtle: #7a7a7a;
    --ui-line: rgba(255, 255, 255, .08);
    --ui-hover: rgba(255, 255, 255, .055);
    --ui-selected: #383838;
    --ui-primary: #ececec;
    --ui-on-primary: #1a1a1a;
    --ui-float: #2c2c2c;
    --ui-code-tag: #7aa2ff;
    --ui-code-attr: #c99bf0;
    --ui-code-string: #5fd38d;
    --ui-code-number: #f0a35c;
    --ui-code-comment: #6f6f78;
  }
}