/* ============================================================
   HARU Web v2 — Design Tokens (Material You · Mint+Blue)
   Shared across gallery.html, generate.html, result.html
   ============================================================ */

:root {
  /* ── Primary: Mint/Teal ─────────────────────────────────── */
  --md-sys-color-primary:            #00897B;
  --md-sys-color-on-primary:         #FFFFFF;
  --md-sys-color-primary-container:  #B2DFDB;
  --md-sys-color-on-primary-container: #00352F;

  /* ── Secondary: Sky Blue ────────────────────────────────── */
  --md-sys-color-secondary:          #1E88E5;
  --md-sys-color-on-secondary:       #FFFFFF;
  --md-sys-color-secondary-container:#BBDEFB;
  --md-sys-color-on-secondary-container: #003366;

  /* ── Tertiary: Soft Coral (accent) ─────────────────────── */
  --md-sys-color-tertiary:           #F06292;
  --md-sys-color-on-tertiary:        #FFFFFF;

  /* ── Surface ────────────────────────────────────────────── */
  --md-sys-color-background:         #F4FFFE;
  --md-sys-color-on-background:      #1A1C1C;
  --md-sys-color-surface:            #F4FFFE;
  --md-sys-color-on-surface:         #1A1C1C;
  --md-sys-color-surface-variant:    #DAF0EE;
  --md-sys-color-on-surface-variant: #3F5654;
  --md-sys-color-surface-container:  #E6F7F5;
  --md-sys-color-surface-container-high: #DCF1EF;
  --md-sys-color-surface-container-highest: #D0EBE9;

  /* ── Outline ────────────────────────────────────────────── */
  --md-sys-color-outline:            #6F9190;
  --md-sys-color-outline-variant:    #B2CDCC;

  /* ── Error ──────────────────────────────────────────────── */
  --md-sys-color-error:              #B3261E;
  --md-sys-color-on-error:           #FFFFFF;
  --md-sys-color-error-container:    #F9DEDC;
  --md-sys-color-on-error-container: #410E0B;

  /* ── Elevation (shadow tokens) ──────────────────────────── */
  --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,.10), 0 1px 3px 1px rgba(0,0,0,.08);
  --md-sys-elevation-2: 0 1px 2px rgba(0,0,0,.12), 0 2px 6px 2px rgba(0,0,0,.09);
  --md-sys-elevation-3: 0 4px 8px 3px rgba(0,0,0,.09), 0 1px 3px rgba(0,0,0,.12);

  /* ── Shape ──────────────────────────────────────────────── */
  --md-sys-shape-small:  8px;
  --md-sys-shape-medium: 12px;
  --md-sys-shape-large:  16px;
  --md-sys-shape-extra-large: 28px;
  --md-sys-shape-full:   9999px;

  /* ── Typography ─────────────────────────────────────────── */
  --md-sys-typescale-display-font:   'Gowun Dodum', sans-serif;
  --md-sys-typescale-body-font:      'Gowun Dodum', sans-serif;
  --md-sys-typescale-label-font:     'Gowun Dodum', sans-serif;

  /* ── Motion ─────────────────────────────────────────────── */
  --md-sys-motion-standard:          200ms cubic-bezier(.2,0,0,1);
  --md-sys-motion-decelerate:        300ms cubic-bezier(0,0,0,1);
  --md-sys-motion-emphasized:        500ms cubic-bezier(.2,0,0,1);

  /* ── Glass blur (app bar) ───────────────────────────────── */
  --haru-glass-bg:    rgba(244,255,254,.82);
  --haru-glass-blur:  saturate(1.8) blur(16px);

  /* ── Brand gradients ────────────────────────────────────── */
  --haru-gradient-primary: linear-gradient(135deg, #00897B 0%, #1E88E5 100%);
  --haru-gradient-card:    linear-gradient(180deg, rgba(0,137,123,.06) 0%, rgba(30,136,229,.04) 100%);
}