/* Approved ISF format-option tokens; scoped to the panel. */
#formatoptions {
  /* Surfaces and ink — stone neutrals (hue 85), as on the live page */
  --color-paper:        oklch(99.2% 0.002 85);   /* panel / editor surface   (~#FDFDFC) */
  --color-paper-2:      oklch(97.6% 0.004 85);   /* page ground, hover       (~#F8F7F5) */
  --color-paper-3:      oklch(95.6% 0.006 85);   /* bars, tablist ground     (~#F4F3F0) */
  --color-code:         oklch(98.4% 0.003 85);   /* SQL panes                            */
  --color-rule:         oklch(91.5% 0.007 85);   /* hairlines                (~#E8E6E1) */
  --color-rule-2:       oklch(82.5% 0.009 85);   /* control borders          (~#C9C6BE) */
  --color-muted:        oklch(46.5% 0.009 85);   /* secondary text           (~#5C5A56) 6.6:1 on paper */
  --color-ink:          oklch(22% 0.005 85);     /* primary text             (~#1A1A1A) */

  /* Accent — ISF cyan. The 60% step is the ring/marker; text and fills use 52%/45% */
  --color-accent:       oklch(60% 0.108 220);    /* #0891B2 — focus ring, markers (3.6:1 vs paper) */
  --color-accent-ink:   oklch(52% 0.092 220);    /* #0E7490 — accent text, primary fill (5.4:1) */
  --color-accent-deep:  oklch(45% 0.078 222);    /* #155E75 — primary hover/active */
  --color-accent-tint:  oklch(96.6% 0.022 205);  /* #ECFEFF — selected segment ground */
  --color-accent-tint-2:oklch(92.5% 0.045 205);  /* #CFFAFE — pressed segment */
  --color-on-accent:    oklch(99.2% 0.002 85);   /* text on --color-accent-ink fill (5.4:1) */
  --color-focus:        oklch(60% 0.108 220);

  /* Status */
  --color-warn-ink:     oklch(47% 0.118 50);     /* #92400E — 7:1 on warn ground */
  --color-warn-ground:  oklch(98.6% 0.022 92);   /* #FFFBEB */
  --color-warn-rule:    oklch(66% 0.16 58);      /* #D97706 */
  --color-error-ink:    oklch(50% 0.17 28);      /* ~#B42318 — 6:1 on paper */
  --color-error-ground: oklch(97.4% 0.014 28);
  --color-success-ink:  oklch(47% 0.1 155);      /* ~#14733F — 5.9:1 on paper */

  /* SQL colouring — the classic ISF palette, toned down */
  --color-sql-keyword:  oklch(45% 0.17 262);     /* blue    */
  --color-sql-function: oklch(46% 0.16 330);     /* magenta */
  --color-sql-string:   oklch(48% 0.16 28);      /* red     */
  --color-sql-comment:  oklch(50% 0.1 150);      /* green   */
  --color-sql-number:   oklch(48% 0.11 55);      /* amber   */
  --color-sql-variable: oklch(46% 0.12 300);     /* violet  */
  --color-sql-type:     oklch(45% 0.1 200);      /* teal    */
  --color-sql-plain:    oklch(24% 0.005 85);
  --color-line-mark:    oklch(60% 0.108 220);    /* gutter mark for lines changed by the last edit */
  --color-line-ground:  oklch(96.6% 0.022 205);

  /* Type */
  --font-ui:   "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --text-xs:   0.8125rem;  /* 13px — meta: tags, counts, captions */
  --text-sm:   0.875rem;   /* 14px — controls, help, body of the panel */
  --text-base: 0.9375rem;  /* 15px — row labels */
  --text-md:   1.0625rem;  /* 17px — panel title */
  --text-lg:   1.375rem;   /* 22px — page wordmark */
  --text-code: 0.8125rem;  /* 13px — SQL panes, same as the live editor */

  --leading-tight: 1.25;
  --leading-body:  1.5;
  --leading-code:  1.55;

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Space — 4pt scale */
  --space-3xs: 0.125rem;  /*  2px */
  --space-2xs: 0.25rem;   /*  4px */
  --space-xs:  0.5rem;    /*  8px */
  --space-sm:  0.75rem;   /* 12px */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2.5rem;    /* 40px */

  /* Control geometry */
  --control-h:       2.5rem;   /* 40px — every select, input, button, segment */
  --control-h-touch: 2.75rem;  /* 44px — coarse pointers */
  --rule-w:   1px;
  --ring-w:   2px;
  --radius-sm: 4px;
  --radius-md: 6px;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 200ms;

  /* Layers */
  --z-base:   1;
  --z-sticky: 200;

  /* Shadow — one whisper, used on the sticky sample only */
  --shadow-whisper: 0 1px 2px oklch(22% 0.005 85 / 0.06);
}