/* ---------------------------------------------------------------------------
   The Recipes We Keep, theme
   Every colour, font and shape lives here. Changing the look of the whole site
   means editing this file and nothing else.

   Presets are at the foot. To make one the site default, change
   DEFAULT_THEME in app.js. To try one without changing anything, use the
   theme picker in the toolbar.
   --------------------------------------------------------------------------- */

:root {
  /* ground and surfaces */
  --ground:        #F5F4F1;
  --surface:       #FFFFFF;
  --surface-soft:  #FBFAF7;

  /* ink */
  --ink:           #2E2A26;
  --ink-soft:      #4A4541;
  --ink-muted:     #6A635C;

  /* accent, the red of the old check cloth */
  --accent:        #9A3A2E;
  --accent-bright: #B4453A;
  --accent-deep:   #6B2219;
  --on-accent:     #FFFFFF;

  /* herb green, used for category chips */
  --herb:          #7D8F6A;
  --herb-ink:      #3C4A33;
  --herb-wash:     rgba(125, 143, 106, 0.20);

  /* tape and card edges */
  --tape:          rgba(214, 205, 182, 0.70);
  --line:          rgba(46, 42, 38, 0.14);
  --line-strong:   rgba(46, 42, 38, 0.26);

  /* shadow */
  --lift:      0 8px 20px rgba(40, 36, 32, 0.10);
  --lift-high: 0 10px 26px rgba(40, 36, 32, 0.14);

  /* type */
  --font-script: 'Petit Formal Script', cursive;
  --font-hand:   'Homemade Apple', cursive;
  --font-caps:   'Cormorant Garamond', Georgia, serif;
  --font-typed:  'Special Elite', 'Courier New', monospace;
  --font-body:   'Lora', Georgia, serif;

  /* shape */
  --radius: 3px;
  --radius-pill: 22px;

  /* the tilt on cards and scans, set to 0deg for a straight, formal look */
  --tilt-a: -0.9deg;
  --tilt-b:  1.1deg;
  --tilt-c: -1.4deg;
}

/* ---------------------------------------------------------------------------
   PRESETS
   Each one only overrides what differs from the block above.
   --------------------------------------------------------------------------- */

/* Blue and white. Crisp ground, dusty blue, herb green for the course chips. */
:root[data-theme="blue"] {
  --ground:        #F4F6F8;
  --surface:       #FFFFFF;
  --surface-soft:  #F8FAFB;
  --ink:           #23292E;
  --ink-soft:      #3C454C;
  --ink-muted:     #5F6A72;
  --accent:        #35627F;
  --accent-bright: #42758E;
  --accent-deep:   #1F4258;
  --herb:          #7D8F6A;
  --herb-ink:      #3C4A33;
  --herb-wash:     rgba(125, 143, 106, 0.20);
  --tape:          rgba(198, 212, 220, 0.70);
  --line:          rgba(35, 41, 46, 0.14);
  --line-strong:   rgba(35, 41, 46, 0.26);
}

/* Blue and green. Same ground, teal accent, deeper green chips. */
:root[data-theme="bluegreen"] {
  --ground:        #F3F7F5;
  --surface:       #FFFFFF;
  --surface-soft:  #F7FAF8;
  --ink:           #222C29;
  --ink-soft:      #3B4845;
  --ink-muted:     #5E6C68;
  --accent:        #2E6B6B;
  --accent-bright: #3B8181;
  --accent-deep:   #1C4747;
  --herb:          #5F7F58;
  --herb-ink:      #2F4430;
  --herb-wash:     rgba(95, 127, 88, 0.20);
  --tape:          rgba(196, 215, 206, 0.70);
  --line:          rgba(34, 44, 41, 0.14);
  --line-strong:   rgba(34, 44, 41, 0.26);
}

/* Crisp. Near white, charcoal text, one red accent, everything straight. */
:root[data-theme="crisp"] {
  --ground:        #FAFAFA;
  --surface:       #FFFFFF;
  --surface-soft:  #F6F6F6;
  --ink:           #1E1E1E;
  --ink-soft:      #3A3A3A;
  --ink-muted:     #616161;
  --accent:        #A4342A;
  --accent-bright: #BD4034;
  --accent-deep:   #71211A;
  --herb:          #6E7F63;
  --herb-ink:      #35402E;
  --herb-wash:     rgba(110, 127, 99, 0.18);
  --tape:          rgba(222, 222, 218, 0.72);
  --line:          rgba(30, 30, 30, 0.13);
  --line-strong:   rgba(30, 30, 30, 0.25);
  --radius:        2px;
  --tilt-a: 0deg; --tilt-b: 0deg; --tilt-c: 0deg;
}

/* Warm, the cream and red check the covers use. */
:root[data-theme="warm"] {
  --ground:        #EFEAE0;
  --surface:       #FFFDF8;
  --surface-soft:  #FAF6EC;
  --ink:           #2E2A26;
  --accent:        #9A3A2E;
  --accent-bright: #B4453A;
  --accent-deep:   #6B2219;
  --tape:          rgba(214, 205, 182, 0.78);
}