@import './utils.css';
@import './structural-elements.css';

/* ─── Font ─────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Inter Variable';
  src: url('../fonts/InterVariable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ─── Tailwind Preflight (light DOM) ───────────────────────────────────────── */
/*
  1. Prevent padding and border from affecting element width.
  2. Remove default margins and padding.
  3. Reset all borders.
*/

*,
::after,
::before,
::backdrop,
::file-selector-button {
  box-sizing: border-box; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 2 */
  border: 0 solid; /* 3 */
}

/*
  1. Use a consistent sensible line-height in all browsers.
  2. Prevent adjustments of font size after orientation changes in iOS.
  3. Use a more readable tab size.
  4. Use our Inter Variable font stack.
  7. Disable tap highlights on iOS.
*/

html {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  tab-size: 4; /* 3 */
  font-family: var(
    --skope-font,
    'Inter Variable',
    ui-sans-serif,
    system-ui,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji'
  ); /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
  Base body styles using design tokens.
*/

body {
  background: var(--skope-bg);
  color: var(--skope-fg);
}

/*
  1. Add the correct height in Firefox.
  2. Correct the inheritance of border color in Firefox.
  3. Reset the default border style to a 1px solid border.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/* Add the correct text decoration in Chrome, Edge, and Safari. */

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

/* Remove the default font size and weight for headings. */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/* Reset links to optimize for opt-in styling instead of opt-out. */

a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

/* Add the correct font weight in Edge and Safari. */

b,
strong {
  font-weight: bolder;
}

/*
  1. Use a monospace font stack by default.
  4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/* Add the correct font size in all browsers. */

small {
  font-size: 80%;
}

/* Prevent `sub` and `sup` elements from affecting the line height. */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
  1. Remove text indentation from table contents in Chrome and Safari.
  2. Correct table border color inheritance.
  3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/* Use the modern Firefox focus style for all focusable elements. */

:-moz-focusring {
  outline: auto;
}

/* Add the correct vertical alignment in Chrome and Firefox. */

progress {
  vertical-align: baseline;
}

/* Add the correct display in Chrome and Safari. */

summary {
  display: list-item;
}

/* Make lists unstyled by default. */

ol,
ul,
menu {
  list-style: none;
}

/*
  1. Make replaced elements `display: block` by default.
  2. Add `vertical-align: middle` to align replaced elements more sensibly.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/* Constrain images and videos to the parent width and preserve aspect ratio. */

img,
video {
  max-width: 100%;
  height: auto;
}

/*
  1. Inherit font styles in all browsers.
  2. Remove border radius.
  3. Remove background color.
  4. Ensure consistent opacity for disabled states.
*/

button,
input,
select,
optgroup,
textarea,
::file-selector-button {
  font: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  border-radius: 0; /* 2 */
  background-color: transparent; /* 3 */
  opacity: 1; /* 4 */
}

:where(select:is([multiple], [size])) optgroup {
  font-weight: bolder;
}

:where(select:is([multiple], [size])) optgroup option {
  padding-inline-start: 20px;
}

::file-selector-button {
  margin-inline-end: 4px;
}

/* Reset the default placeholder opacity in Firefox. */

::placeholder {
  opacity: 1;
}

@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
  ::placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
}

/* Prevent resizing textareas horizontally by default. */

textarea {
  resize: vertical;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-date-and-time-value {
  min-height: 1lh;
  text-align: inherit;
}

::-webkit-datetime-edit {
  display: inline-flex;
}

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
  padding-block: 0;
}

::-webkit-calendar-picker-indicator {
  line-height: 1;
}

:-moz-ui-invalid {
  box-shadow: none;
}

button,
input:where([type='button'], [type='reset'], [type='submit']),
::file-selector-button {
  appearance: button;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[hidden]:where(:not([hidden='until-found'])) {
  display: none !important;
}

/* ─── Native tables ───────────────────────────────────────────────────────── */

.skope-table-scroll {
  max-inline-size: 100%;
  overflow-x: auto;
}

.skope-table-scroll > table.skope-table {
  inline-size: 100%;
  min-inline-size: var(--container-2xl);
  background: transparent;
  border-collapse: collapse;
  table-layout: auto;
}

table.skope-table :is(th, td) {
  padding-block: var(--spacing-2);
  padding-inline: var(--spacing-3);
  vertical-align: middle;
  color: var(--skope-fg);
  font-size: var(--text-sm);
  text-align: start;
  border-block-end: var(--border-width) solid var(--skope-border);
}

table.skope-table thead th {
  color: var(--skope-muted-fg);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-xs);
}

table.skope-table tbody th[scope='row'] {
  font-weight: inherit;
}

table.skope-table tbody tr:hover {
  background: var(--skope-muted);
}

table.skope-table .skope-table-actions {
  width: var(--spacing-12);
  min-width: var(--spacing-12);
  max-width: var(--spacing-12);
  text-align: end;
  white-space: nowrap;
}

.skope-table-actions-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─── Native date controls ────────────────────────────────────────────────── */

input.skope-date-input:is([type='date'], [type='datetime-local']) {
  width: 100%;
  height: var(--spacing-7);
  padding-inline: var(--skope-input-padding-x);
  color: var(--skope-input-fg);
  background: var(--skope-input-bg);
  border: var(--border-width) solid var(--skope-input-border);
  border-radius: var(--input-radius);
  outline: var(--skope-focus-ring-width) solid transparent;
  outline-offset: var(--skope-focus-ring-offset);
  font: inherit;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color-scheme: light;
}

html.dark input.skope-date-input:is([type='date'], [type='datetime-local']) {
  color-scheme: dark;
}

input.skope-date-input:is([type='date'], [type='datetime-local']):focus-visible {
  outline-color: var(--skope-focus-ring-color);
}

input.skope-date-input:is([type='date'], [type='datetime-local']):disabled {
  opacity: var(--skope-disabled-opacity);
  cursor: not-allowed;
}

code {
  display: inline-block;
  padding-inline: var(--spacing);
  padding-block: calc(var(--spacing) * 0.2);
  border-radius: var(--radius-sm);
  background-color: var(--skope-muted);
  color: oklch(from var(--skope-fg) l c h / 0.8);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
  font-feature-settings: normal;
  font-variation-settings: normal;
}

ul,
ol {
  list-style: disc;
  margin-left: var(--spacing-4);
  padding-left: var(--spacing-4);
  list-style-position: outside;
  list-style-type: disc;
}

/* ─── Scrollbars ───────────────────────────────────────────────────────────── */
/*
  Themed, thin, rounded scrollbars applied to every scroll container. Firefox
  uses the standard inherited props; WebKit (Chrome/Safari) needs the pseudo-
  elements for a rounded thumb and ignores scrollbar-color when they're present,
  so the two are split by @supports. This same block is mirrored in reset.css so
  scroll containers inside component shadow roots get the same treatment.
*/

/* Firefox — standard props (no rounded corners available here). */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--skope-scrollbar-thumb) var(--skope-scrollbar-track);
  }
}

/* WebKit — pseudo-elements for the rounded thumb. */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar {
    width: var(--skope-scrollbar-width);
    height: var(--skope-scrollbar-width);
  }

  ::-webkit-scrollbar-track {
    background: var(--skope-scrollbar-track);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--skope-scrollbar-thumb);
    border-radius: var(--skope-scrollbar-radius);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--skope-scrollbar-thumb-hover);
  }

  ::-webkit-scrollbar-corner {
    background: var(--skope-scrollbar-track);
  }
}