/*
 * COF design tokens.
 *
 * Split out of base.css so the block editor canvas can have the tokens without
 * the reset. add_editor_style() prefixes every selector with
 * .editor-styles-wrapper, so feeding it base.css also fed it `p, h1..h6 { margin: 0 }`
 * and `ul, ol { padding: 0 }`, which flattened every block's spacing and pushed
 * list markers outside the canvas. The editor gets this file and editor.css; the
 * front end gets this file and all of base.css.
 *
 * @package COF
 */

/* ------------------------------------------------------------------ Tokens */

:root {
  /* Surfaces */
  --cof-espresso:      #332012;
  --cof-cream:         #F1DECA;
  --cof-sand:          #E7D8C8;
  --cof-deep-sand:     #DFCFBE;
  --cof-card:          #F5E8DA;

  /* Text */
  --cof-ink:           #2A1D13;
  --cof-body:          #4A3626;
  /* Darkened from #6E5A48, which measured 4.29 on the deep-sand band and
     so failed AA at 14px. This clears 4.5 on cream, sand and deep sand. */
  --cof-muted:         #5F4A38;
  --cof-on-dark:       #F5EADC;
  --cof-on-dark-soft:  #E4D5C4;
  --cof-muted-dark:    #C9B7A3;

  /* Accent and lines */
  --cof-gold:          #D8A263;
  --cof-hairline:      #D5C2B0;
  --cof-hairline-dark: #4E3A28;
  --cof-rule:          #B79E86;
  --cof-rule-dark:     #C7AE94;

  /* Flags for unconfirmed client content.
     Darkened from #7A5B33, which was doing two jobs: the developer flag, and the
     required-field asterisk and the "Out of stock" line, which are ordinary UI
     and have to clear AA. It measured 4.46 on sand and 4.09 on deep sand. This
     clears 4.5 on all four surfaces, the worst being 4.71 on deep sand. */
  --cof-flag:          #70522C;
  --cof-flag-dark:     #C9A87C;

  /* The italic serif closing line on COFamily. It happens to share a value with
     --cof-flag; it does not share a meaning, and a flag that turns out to be a
     real design colour is worse than a duplicated hex. */
  --cof-quote:         #7A5B33;

  /* Control outlines. A hairline fails WCAG 1.4.11 against these surfaces. */
  --cof-control:       #6E5A48;

  /* Type */
  --cof-serif: 'Playfair Display', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --cof-sans:  'Jost', 'Century Gothic', 'Futura', 'Trebuchet MS', system-ui, sans-serif;

  /* Radius. Four steps, nothing else. */
  --cof-r-card:  14px;
  --cof-r-thumb: 10px;
  --cof-r-input: 8px;
  --cof-r-check: 4px;

  /* Layout */
  --cof-page:      1440px;
  --cof-gutter:    76px;
  --cof-gutter-lg: 88px;
  --cof-section:   88px;

  /* Motion */
  --cof-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 1024px) {
  :root { --cof-gutter: 40px; --cof-gutter-lg: 40px; --cof-section: 64px; }
}
@media (max-width: 600px) {
  :root { --cof-gutter: 20px; --cof-gutter-lg: 20px; --cof-section: 48px; }
}