/* Design Tokens (SSOT)
   - 구조: Core tokens (--color-*, --surface 등) → Alias tokens (--sp-*)
   - 호환: styles.css에서 쓰던 변수명들도 마지막에 매핑 제공
*/

/* =========================
   1) Core (Light default)
   ========================= */
  :root {
    /* Neutrals / Surfaces */
    --color-bg: #f7f9fc;         /* styles.css: --bg-color */
    --surface:   #ffffff;         /* styles.css: --surface-color */
    --color-fg:  #000000;         /* styles.css: --text-color-primary */
    --color-muted:  #5f6368;      /* styles.css: --text-color-secondary */
    --color-border: #e0e0e0;      /* styles.css: --divider-color */

    /* Accent & Status */
    --color-accent:     #fac74f;  /* styles.css: --accent-color */
    --color-on-accent:  #ffffff;  /* styles.css: --accent-text-color */
    --color-success:    #34a853;  /* styles.css: --success-color */
    --color-danger:     #ea4335;  /* styles.css: --error-color */

    /* Effects */
    --shadow-color: rgba(0,0,0,0.1);           /* styles.css: --shadow-color */
    --shadow-1: 0 4px 12px var(--shadow-color);/* 프리셋 (sp-shadow용) */
    --overlay-scrim: rgba(0,0,0,.6);

    /* Optional surfaces (theme.css 스타일) */
    --panel-bg: var(--color-bg);
    --footer-bg: #f8fafc;
    --glass-bg: rgba(255,255,255,0.92);
    --glass-border: rgba(15,23,42,0.08);

    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
                 Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    /* Toast/Snackbar */
    --toast-bg: #323232;          /* styles.css: --snackbar-bg */
    --toast-fg: #ffffff;          /* styles.css: --snackbar-text */

    /* Radii / Pressed shadow (theme.css 풍) */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-pressed: 0 1px 2px rgba(0,0,0,0.06);
  }

  /* =========================
     2) Alias (sp-*) layer
     ========================= */
  :root {
    --sp-bg: var(--color-bg);
    --sp-surface: var(--surface);
    --sp-fg: var(--color-fg);
    --sp-muted: var(--color-muted);
    --sp-border: var(--color-border);

    --sp-panel-bg: var(--panel-bg);
    --sp-glass: var(--glass-bg);
    --sp-glass-border: var(--glass-border);

    --sp-accent: var(--color-accent);
    --sp-on-accent: var(--color-on-accent);

    --sp-icon: var(--color-muted);
    /* Fallback first, then override with color-mix when supported */
    --sp-hover-bg: var(--surface);
    --sp-hover-border: var(--color-border);
    --sp-hover-bg: color-mix(in lab, var(--surface) 88%, var(--color-fg));
    --sp-hover-border: color-mix(in lab, var(--color-border) 70%, var(--color-fg));

    --sp-shadow: var(--shadow-1);
    --sp-shadow-pressed: var(--shadow-pressed);

    --sp-success: var(--color-success);
    --sp-danger: var(--color-danger);

    --sp-toast-bg: var(--toast-bg);
    --sp-toast-fg: var(--toast-fg);

    --sp-font: 'Roboto', var(--font-sans);
  }

  /* =========================
     3) Dark overrides
     ========================= */
  :root[data-theme="dark"],
  body[data-theme="dark"] {
    --color-bg: #121212;          /* styles.css [data-theme="dark"] */
    --surface:   #1e1e1e;
    --color-fg:  #e8eaed;
    --color-muted:  #bdc1c6;
    --color-border: #3c4043;

    --color-accent:    #c29654;
    --color-on-accent: #1e1e1e;

    --shadow-color: rgba(0,0,0,0.4);
    --shadow-1: 0 4px 12px var(--shadow-color);

    --color-success: #81c995;
    --color-danger:  #f28b82;

    --toast-bg:  #e8eaed;
    --toast-fg:  #121212;

    /* Optional surfaces */
    --panel-bg: #121212;
    --glass-bg: rgba(36,38,45,0.88);
    --glass-border: rgba(148,163,184,0.24);

    /* sp-* 파생값(hover 등) 재정의: fallback -> color-mix */
    --sp-hover-bg: var(--surface);
    --sp-hover-border: var(--color-border);
    --sp-hover-bg: color-mix(in lab, var(--surface) 78%, var(--color-fg));
    --sp-hover-border: color-mix(in lab, var(--color-border) 40%, var(--color-fg));
  }

  /* ==========================================
     4) 호환 레이어 (styles.css 변수명 → sp-토큰)
     ========================================== */
  :root {
    /* 기존 styles.css가 기대하는 변수명 유지 */
    --bg-color: var(--sp-bg);
    --surface-color: var(--sp-surface);
    --text-color-primary: var(--sp-fg);
    --text-color-secondary: var(--sp-muted);
    --divider-color: var(--sp-border);

    --accent-color: var(--sp-accent);
    --accent-text-color: var(--sp-on-accent);

    --icon-color: var(--sp-icon);
    --button-hover-bg: var(--sp-hover-bg);

    --success-color: var(--sp-success);
    --error-color: var(--sp-danger);

    --snackbar-bg: var(--sp-toast-bg);
    --snackbar-text: var(--sp-toast-fg);

    --font-family: var(--sp-font);
  }