/*
   Flexoki theme for ink-ui.

   This is an intentionally different visual language from ink-ui: warm paper,
   quiet separators, editorial type, and pigment accents instead of heavy
   monochrome outlines. Palette inspired by Steph Ango's Flexoki system:
   https://stephango.com/flexoki
*/
html[data-theme="flexoki"] {
  --ink-black: #100f0f;
  --ink-900: #282726;
  --ink-700: #575653;
  --ink-500: #878580;
  --ink-300: #b7b5ac;
  --ink-200: #dad8ce;
  --ink-100: #f2f0e5;
  --ink-white: #fffcf0;
  --ink-border: 1px;
  --ink-radius: .25rem;
  --ink-shadow: none;
  --flexoki-orange: #da702c;
  --flexoki-red: #d14d41;
  --flexoki-teal: #3aa99f;
  color-scheme: light;
  color: var(--ink-black);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
}

html[data-theme="flexoki"] body { background: var(--ink-white); }
html[data-theme="flexoki"] .topbar {
  background: var(--ink-white);
  border-bottom: 1px solid var(--ink-200);
  color: var(--ink-black);
  padding-bottom: 1rem;
  padding-top: 1rem;
}
html[data-theme="flexoki"] .brand { font-size: 1.05rem; letter-spacing: .02em; }
html[data-theme="flexoki"] .topnav { color: var(--ink-700); gap: 1.25rem; }
html[data-theme="flexoki"] .shell { max-width: 62rem; }
html[data-theme="flexoki"] .eyebrow { color: var(--flexoki-orange); letter-spacing: .1em; }
html[data-theme="flexoki"] h1,
html[data-theme="flexoki"] h2,
html[data-theme="flexoki"] h3 { font-family: Georgia, 'Times New Roman', serif; font-weight: 500; }
html[data-theme="flexoki"] h1 { letter-spacing: -.035em; }
html[data-theme="flexoki"] h2 { letter-spacing: -.015em; }
html[data-theme="flexoki"] .lede { color: var(--ink-700); }

html[data-theme="flexoki"] .button {
  background: transparent;
  border-color: var(--ink-300);
  border-radius: var(--ink-radius);
  font-weight: 600;
  min-height: 2.5rem;
  padding-left: .85rem;
  padding-right: .85rem;
}
html[data-theme="flexoki"] .button:hover,
html[data-theme="flexoki"] .button:focus-visible { background: var(--ink-100); border-color: var(--ink-700); }
html[data-theme="flexoki"] .button-primary {
  background: var(--flexoki-orange);
  border-color: var(--flexoki-orange);
  color: var(--ink-white);
}
html[data-theme="flexoki"] .button-primary:hover,
html[data-theme="flexoki"] .button-primary:focus-visible { background: #bc5215; border-color: #bc5215; }
html[data-theme="flexoki"] .button-danger {
  background: transparent;
  border-color: var(--flexoki-red);
  border-style: solid;
  color: var(--flexoki-red);
}
html[data-theme="flexoki"] .button-danger:hover,
html[data-theme="flexoki"] .button-danger:focus-visible { background: #fce9e6; border-color: var(--flexoki-red); }

html[data-theme="flexoki"] input,
html[data-theme="flexoki"] select,
html[data-theme="flexoki"] textarea {
  background: transparent;
  border-color: var(--ink-300);
  border-radius: var(--ink-radius);
}
html[data-theme="flexoki"] input:focus-visible,
html[data-theme="flexoki"] select:focus-visible,
html[data-theme="flexoki"] textarea:focus-visible { border-color: var(--flexoki-teal); outline-color: var(--flexoki-teal); }

html[data-theme="flexoki"] .panel {
  background: var(--ink-100);
  border: 0;
  border-radius: var(--ink-radius);
  box-shadow: none;
}
html[data-theme="flexoki"] .snapshot { background: transparent; }
html[data-theme="flexoki"] .bookmark-detail { background: transparent; }
html[data-theme="flexoki"] .section-heading { border-bottom: 1px solid var(--ink-200); }
html[data-theme="flexoki"] .bookmark-list { border-top: 0; }
html[data-theme="flexoki"] .bookmark-card { border-bottom-color: var(--ink-200); padding-bottom: 1.35rem; padding-top: 1.35rem; }
html[data-theme="flexoki"] .bookmark-card h2 a { text-decoration-color: var(--flexoki-orange); }
html[data-theme="flexoki"] .bookmark-url { color: var(--ink-500); }
html[data-theme="flexoki"] .bookmark-meta { color: var(--ink-500); }
html[data-theme="flexoki"] .tag { background: var(--ink-200); border: 0; border-radius: var(--ink-radius); padding: .2rem .5rem; }
html[data-theme="flexoki"] .status { color: var(--flexoki-teal); }
html[data-theme="flexoki"] .notice { border: 0; border-left: 3px solid var(--flexoki-orange); background: var(--ink-100); }
html[data-theme="flexoki"] .notice-error { border-left-color: var(--flexoki-red); }
html[data-theme="flexoki"] .form fieldset { border-top-color: var(--ink-200); }
html[data-theme="flexoki"] .snapshot-content blockquote { border-left-color: var(--flexoki-orange); }

/* Give the component demo its Flexoki-specific, low-chrome treatment too. */
html[data-theme="flexoki"] .demo-tab { border: 0; border-bottom: 2px solid transparent; }
html[data-theme="flexoki"] .demo-tab + .demo-tab { border-left: 0; }
html[data-theme="flexoki"] .demo-tabs { border-bottom: 1px solid var(--ink-200); }
html[data-theme="flexoki"] .demo-tab-active { background: transparent; border-bottom-color: var(--flexoki-orange); color: var(--ink-black); }
html[data-theme="flexoki"] .demo-sidebar { background: var(--ink-100); border: 0; }
html[data-theme="flexoki"] .demo-sidebar-heading { background: var(--ink-200); color: var(--ink-black); }
html[data-theme="flexoki"] .demo-sidebar a { border-bottom-color: var(--ink-200); }
html[data-theme="flexoki"] .demo-code { background: var(--ink-900); color: var(--ink-white); }

html[data-theme="flexoki"][data-mode="dark"] {
  --ink-black: #cecdc3;
  --ink-900: #403e3c;
  --ink-700: #b7b5ac;
  --ink-500: #878580;
  --ink-300: #575653;
  --ink-200: #343331;
  --ink-100: #1c1b1a;
  --ink-white: #100f0f;
  --flexoki-orange: #bc5215;
  --flexoki-red: #af3029;
  --flexoki-teal: #24837b;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="flexoki"][data-mode="auto"] {
    --ink-black: #cecdc3;
    --ink-900: #403e3c;
    --ink-700: #b7b5ac;
    --ink-500: #878580;
    --ink-300: #575653;
    --ink-200: #343331;
    --ink-100: #1c1b1a;
    --ink-white: #100f0f;
    --flexoki-orange: #bc5215;
    --flexoki-red: #af3029;
    --flexoki-teal: #24837b;
    color-scheme: dark;
  }
}

html[data-theme="flexoki"][data-mode="dark"] body { background: var(--ink-white); }
html[data-theme="flexoki"][data-mode="dark"] .button-danger:hover { background: #2c1d1c; }

@media (prefers-color-scheme: dark) {
  html[data-theme="flexoki"][data-mode="auto"] body { background: var(--ink-white); }
  html[data-theme="flexoki"][data-mode="auto"] .button-danger:hover { background: #2c1d1c; }
}