/* Design tokens — CeraVe-inspired sage/gray */
:root {
  /* Brand */
  --c-primary:     #6FA89A;
  --c-primary-600: #5A9385;
  --c-primary-700: #3F7369;
  --c-mint:        #CFE3DD;
  --c-mint-50:     #E8F2EE;

  /* Neutrals */
  --c-ink:         #2E3538;
  --c-ink-2:       #4A5358;
  --c-gray:        #6B7478;
  --c-gray-2:      #9BA3A7;
  --c-line:        #E4E8EA;
  --c-surface:     #F2F4F5;
  --c-surface-2:   #F8FAFA;
  --c-white:       #FFFFFF;

  /* Semantic */
  --c-success: #4B8F6B;
  --c-warn:    #C69541;
  --c-danger:  #B5574E;
  --c-info:    #5F8AA8;

  /* Type */
  --f-display: "Fraunces", ui-serif, Georgia, serif;
  --f-body:    "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Scale */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* Shadows */
  --sh-1: 0 1px 2px rgba(46, 53, 56, 0.04), 0 1px 3px rgba(46, 53, 56, 0.06);
  --sh-2: 0 4px 12px rgba(46, 53, 56, 0.06), 0 2px 4px rgba(46, 53, 56, 0.04);
  --sh-3: 0 18px 48px -18px rgba(63, 115, 105, 0.28), 0 6px 16px rgba(46, 53, 56, 0.06);
  --sh-focus: 0 0 0 3px rgba(111, 168, 154, 0.28);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
}