/* Tastebuds design tokens: the app's theme (src/ui/theme.ts) and Isaac's design export.
   Change a colour, a shadow or a radius here and nowhere else. */
:root {
  /* colours */
  --ink: #0D3B22;          /* text, borders, hard shadows */
  --paper: #FEFAF2;        /* cards, text on ink */
  --cream: #F1E4CC;        /* page background, bottom of the gradient */
  --cream-mid: #F7EEDD;
  --tomato: #F4401B;       /* primary accent */
  --gold: #FFD43B;         /* selected */
  --gold-deep: #F2A900;
  --coral: #F2595B;
  --blue: #3FB7EE;
  --blue-soft: #6FD0FF;
  --white: #FFFFFF;
  --black: #000000;

  /* soft ink */
  --ink-2: rgba(13, 59, 34, .62);   /* secondary text */
  --ink-3: rgba(13, 59, 34, .35);   /* placeholders */
  --line: rgba(13, 59, 34, .18);    /* lines */

  /* see-through */
  --glass: rgba(254, 250, 242, .94);      /* pills over a photo */
  --paper-soft: rgba(254, 250, 242, .6);
  --cream-clear: rgba(241, 228, 204, 0);  /* start of the fade above the join bar */
  --tomato-ring: rgba(244, 64, 27, .25);  /* field with an error */

  /* the phone and its camera */
  --bezel: #121613;
  --camera-bg: #0D0B09;
  --camera-control: rgba(6, 30, 17, .45);
  --tap: rgba(255, 255, 255, .5);         /* the finger in the demo */
  --tap-ring: rgba(255, 255, 255, .95);
  --scrim: rgba(13, 59, 34, .45);         /* dims what's behind an overlay */
  --vignette: radial-gradient(70% 55% at 50% 48%, rgba(255, 244, 232, .18), rgba(0, 0, 0, .35));  /* the viewfinder */

  /* a phone's home screen (the demo's widget scene) */
  --wallpaper: linear-gradient(165deg, #1C5636 0%, #0D3B22 55%, #082A18 100%);
  --wall-glow-1: rgba(248, 95, 95, .45);
  --wall-glow-2: rgba(63, 183, 238, .4);
  --wall-glow-3: rgba(255, 212, 59, .25);
  --glass-white: rgba(255, 255, 255, .16);
  --glass-edge: rgba(255, 255, 255, .28);
  --glass-shine: rgba(255, 255, 255, .35);
  --glass-dot: rgba(255, 255, 255, .45);
  --widget-shadow: 0 10px 24px rgba(0, 0, 0, .22);
  --photo-fade: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  --sticker-shadow: drop-shadow(0 12px 12px rgba(13, 59, 34, .28));

  /* category card: Pasta */
  --pasta-green: #1E8C45;
  --pasta-cream: #FFF8EA;
  --pasta-red: #D7261E;
  --pasta-ink: #1E5D34;

  /* sticker fields: pastel, deep */
  --sky: #9FDDFB;    --sky-deep: #1F8FC8;
  --peach: #FFB3A1;  --peach-deep: #E2401F;
  --butter: #FFE08A; --butter-deep: #D99A00;
  --mint: #A8E6B8;   --mint-deep: #1C6B3F;
  --tan: #F7D9B5;    --tan-deep: #B5793A;

  /* gradients */
  --page: linear-gradient(180deg, var(--paper) 0%, var(--cream-mid) 60%, var(--cream) 100%);
  --candy-green: linear-gradient(180deg, #5BB07B 0%, #1C5636 50%, #0D3B22 100%);
  --candy-red: linear-gradient(180deg, #FF9E9E 0%, #F85F5F 55%, #D94545 100%);
  --candy-shine: inset 0 3px 0 rgba(255, 255, 255, .35);
  --candy-shine-strong: inset 0 3px 0 rgba(255, 255, 255, .5);   /* the red capture button */

  /* borders and hard offset shadows (never a blur) */
  --bw: 2.5px;
  --border: var(--bw) solid var(--ink);
  --drop-button: 0 5px 0 var(--ink);
  --drop-card: 0 4px 0 var(--ink);
  --drop-chip: 0 3px 0 var(--ink);
  --drop-pressed: 0 1px 0 var(--ink);
  --press: 3px;             /* how far a button moves into its shadow */

  /* radii */
  --r-pill: 99px;
  --r-card: 22px;
  --r-tile: 18px;
  --r-chip: 12px;

  /* type */
  --font: 'Nunito', system-ui, -apple-system, sans-serif;
  --font-pasta: 'Pacifico', cursive;   /* the Pasta category card only */

  /* motion */
  --spring: cubic-bezier(.3, 1.6, .5, 1);
  --ease: cubic-bezier(.23, 1, .32, 1);
}