coral.css

:root {
  /* Tailwind colors, plus some additional intermediate shades */
  /* Tailwind Sky */
  --blue-050: #f0f9ff;
  --blue-100: #e0f2fe;
  --blue-200: #bae6fd;
  --blue-300: #7dd3fc;
  --blue-400: #38bdf8;
  --blue-500: #0ea5e9;
  --blue-600: #0284c7;
  --blue-650: #0377B4;
  --blue-700: #0369a1;
  --blue-800: #075985;
  --blue-900: #0c4a6e;
  --blue-950: #082f49;
  --blue-975: #051f2f;
  --blue-985: #041824;
  /* Tailwind Stone */
  --gray-050: #fafaf9;
  --gray-100: #f5f5f4;
  --gray-200: #e7e5e4;
  --gray-300: #d6d3d1;
  --gray-325: #CBC7C4;
  --gray-350: #BFBBB8;
  --gray-375: #B4AEAB;
  --gray-400: #a8a29e;
  --gray-500: #78716c;
  --gray-600: #57534e;
  --gray-700: #44403c;
  --gray-800: #292524;
  --gray-900: #1c1917;
  --gray-950: #0c0a09;
  /* Tailwind Amber */
  --yellow-050: #fffbeb;
  --yellow-100: #fef3c7;
  --yellow-200: #fde68a;
  --yellow-300: #fcd34d;
  --yellow-400: #fbbf24;
  --yellow-500: #f59e0b;
  --yellow-600: #d97706;
  --yellow-700: #b45309;
  --yellow-800: #92400e;
  --yellow-900: #78350f;
  --yellow-950: #451a03;
  /* Tailwind Emerald */
  --green-050: #ecfdf5;
  --green-100: #d1fae5;
  --green-200: #a7f3d0;
  --green-300: #6ee7b7;
  --green-400: #34d399;
  --green-500: #10b981;
  --green-600: #059669;
  --green-700: #047857;
  --green-800: #065f46;
  --green-900: #064e3b;
  --green-950: #022c22;
  /* Tailwind Red */
  --red-050: #fef2f2;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-300: #fca5a5;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --red-800: #991b1b;
  --red-900: #7f1d1d;
  --red-950: #450a0a;
  
  /* System font stack */
  --font-sans: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  --font-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; 
  --font-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;

  /* Font sizes */
  --font-small: 0.85rem;
  --font-large: 1.15rem;

  /* Font and focus outline colors */
  --text-light: white;
  --text-normal: var(--gray-700);
  --text-dark: var(--gray-900);
  --table-header-text: var(--gray-800);

  --text-link: var(--blue-700);
  --text-link-focus: var(--blue-800);
  --text-link-light: white;
  --text-link-light-focus: var(--yellow-200);
  --body-focus-outline: var(--blue-700);
  --brand-focus-outline: var(--yellow-300);

  /* Background and border colors */
  --body-bg: var(--gray-200);
  --content-bg: white;
  --brand-bg: var(--blue-700);
  --brand-bg-highlight: var(--blue-650);
  --brand-dark-bg: var(--blue-900);
  --brand-dark-bg-highlight: var(--blue-800);
  --brand-highlight-border: white;
  --column-border-color: var(--gray-350);

  --btn-secondary-bg: var(--gray-300);
  --btn-secondary-border: var(--gray-600);
  --btn-secondary-bg-hover: var(--gray-400);
  --btn-destroy-bg: var(--red-800);
  --btn-destroy-border: var(--red-950);
  --btn-destroy-bg-hover: var(--red-700);

  --table-stripe-bg: var(--gray-100);
  --table-header-bg: var(--gray-200);
  --table-border-inner: var(--gray-325);
  --table-border-outer: var(--gray-350);
  --table-border-header: var(--gray-375);

  --margin-y: 0;

  @media screen and (min-width: 720px) {
    --margin-y: 1rem;
  }

  @media screen and (min-width: 960px) {
    --margin-y: 3rem;
  }

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }

  @media (prefers-color-scheme: dark) {
    /* Font and focus outline colors */
    /*
    --text-light: white;
    --text-normal: white;
    --text-dark: var(--gray-050);
    --table-header-text: var(--gray-200);

    --text-link: var(--blue-300);
    --text-link-focus: var(--blue-400);
    --text-link-light: white;
    --text-link-light-focus: var(--yellow-200);

    --body-focus-outline: var(--blue-500);
    --brand-focus-outline: var(--yellow-300);
    /**/
    /* Background and border colors */
    /*
    --body-bg: var(--blue-985);
    --content-bg: var(--blue-975);
    --brand-bg: var(--blue-900);
    --brand-bg-highlight: var(--blue-800);
    --brand-dark-bg: var(--blue-950);
    --brand-dark-bg-highlight: var(--blue-800);
    --brand-highlight-border: var(--blue-975);
    --column-border-color: var(--blue-800);

    --table-stripe-bg: var(--gray-100);
    --table-header-bg: var(--gray-800);
    --table-border-inner: var(--gray-700);
    --table-border-outer: var(--gray-600);
    --table-border-header: var(--gray-600);

    --btn-secondary-bg: var(--gray-700);
    --btn-secondary-border: var(--gray-400);
    --btn-secondary-bg-hover: var(--gray-600);
    --btn-destroy-bg: var(--red-200);
    --btn-destroy-border: var(--red-100);
    --btn-destroy-bg-hover: var(--red-300);

    --input-bg: var(--gray-300);
    /**/
  }
}