@import "./tokens.css";
@import "tailwindcss";

@layer base {
  :root {
    /* Surface colors */
    --color-ink-0: var(--ink-0);
    --color-ink-1: var(--ink-1);
    --color-ink-2: var(--ink-2);
    --color-ink-3: var(--ink-3);
    --color-ink-4: var(--ink-4);

    /* Line colors */
    --color-line-1: var(--line-1);
    --color-line-2: var(--line-2);
    --color-line-3: var(--line-3);

    /* Foreground */
    --color-fg-1: var(--fg-1);
    --color-fg-2: var(--fg-2);
    --color-fg-3: var(--fg-3);
    --color-fg-4: var(--fg-4);

    /* Accent */
    --color-brass: var(--brass);
    --color-brass-bright: var(--brass-bright);
    --color-brass-deep: var(--brass-deep);
    --color-brass-ink: var(--brass-ink);

    /* Secondary palette */
    --color-oxford: var(--oxford);
    --color-oxford-light: var(--oxford-light);
    --color-burgundy: var(--burgundy);
    --color-burgundy-light: var(--burgundy-light);

    /* Semantic */
    --color-positive: var(--positive);
    --color-positive-bg: var(--positive-bg);
    --color-negative: var(--negative);
    --color-negative-bg: var(--negative-bg);
    --color-warning: var(--warning);
    --color-warning-bg: var(--warning-bg);
    --color-info: var(--info);
    --color-info-bg: var(--info-bg);

    /* Border radii */
    --radius-1: var(--r-1);
    --radius-2: var(--r-2);
    --radius-3: var(--r-3);
    --radius-4: var(--r-4);
    --radius-full: var(--r-full);

    /* Shadows */
    --shadow-s1: var(--shadow-1);
    --shadow-s2: var(--shadow-2);
    --shadow-s3: var(--shadow-3);
    --shadow-sbr: var(--shadow-brass);
  }

  html, body {
    background: var(--ink-0);
    color: var(--fg-2);
    font-family: var(--font-sans);
    font-size: var(--fs-16);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  #root {
    min-height: 100vh;
  }
}