/* ==========================================================================
   Flavor Affiliate — Common CSS Variables
   Shared design tokens for all plugin components
   Issues: #93 #95 #96
   ========================================================================== */

:root {
    /* ── Colors ─────────────────────────────────────────────── */
    --flavor-color-text:          #333333;
    --flavor-color-text-light:    #555555;
    --flavor-color-text-muted:    #888888;
    --flavor-color-text-subtle:   #999999;
    --flavor-color-heading:       #222222;

    --flavor-color-bg:            #ffffff;
    --flavor-color-bg-light:      #f8f9fa;
    --flavor-color-bg-alt:        #f8fafc;

    --flavor-color-border:        #e2e2e2;
    --flavor-color-border-light:  #f0f0f0;

    --flavor-color-accent:        #2563eb;
    --flavor-color-accent-hover:  #1d4ed8;

    --flavor-color-danger:        #dc3545;
    --flavor-color-success:       #16a34a;
    --flavor-color-warning:       #ca8a04;

    --flavor-color-amazon:        #ff9900;
    --flavor-color-amazon-price:  #b12704;
    --flavor-color-rakuten:       #bf0000;

    /* ── Typography ────────────────────────────────────────── */
    --flavor-font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans",
                          "Yu Gothic Medium", "Yu Gothic",
                          "メイリオ", Meiryo, sans-serif;

    --flavor-font-size-xs:     0.75rem;   /* 12px */
    --flavor-font-size-sm:     0.8125rem; /* 13px */
    --flavor-font-size-base:   0.9375rem; /* 15px */
    --flavor-font-size-md:     1rem;      /* 16px */
    --flavor-font-size-lg:     1.125rem;  /* 18px */
    --flavor-font-size-xl:     1.25rem;   /* 20px */

    --flavor-line-height:      1.7;
    --flavor-line-height-tight: 1.4;
    --flavor-line-height-loose: 1.8;

    /* ── Spacing ───────────────────────────────────────────── */
    --flavor-space-xs:   4px;
    --flavor-space-sm:   8px;
    --flavor-space-md:  16px;
    --flavor-space-lg:  24px;
    --flavor-space-xl:  32px;

    /* ── Borders & Radius ──────────────────────────────────── */
    --flavor-radius-sm:  4px;
    --flavor-radius-md:  6px;
    --flavor-radius-lg:  8px;
    --flavor-radius-xl: 12px;

    /* ── Shadows ───────────────────────────────────────────── */
    --flavor-shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.06);
    --flavor-shadow-md:  0 4px 12px rgba(0, 0, 0, 0.1);
    --flavor-shadow-lg:  0 20px 60px rgba(0, 0, 0, 0.25);

    /* ── Transitions ───────────────────────────────────────── */
    --flavor-transition-fast: 0.15s ease;
    --flavor-transition-base: 0.2s ease;
    --flavor-transition-slow: 0.3s ease;
}