/*
 * YiseKan Design System: CSS Custom Properties
 * Requirement: apply the supplied YiseKan Design System ZIP as the canonical theme style.
 * Approach: keep the existing raw tokens, then expose semantic aliases used by the UI kit.
 */

:root {
    /* === Color Palette === */
    --color-bg:             #0f0f0f;       /* Primary background - near black for video contrast */
    --color-bg-elevated:    #1a1a1a;       /* Cards, modals, elevated surfaces */
    --color-bg-hover:       #252525;       /* Hover state for interactive surfaces */
    --color-bg-input:       #1e1e1e;       /* Form input backgrounds */
    --color-border:         #2a2a2a;       /* Subtle borders between sections */
    --color-border-focus:   #ff4d4d;       /* Border highlight on focus */

    --color-text:           #f1f1f1;       /* Primary text - high contrast on dark bg */
    --color-text-secondary: #999999;       /* Secondary text - timestamps, metadata */
    --color-text-muted:     #666666;       /* Tertiary text - placeholders, disabled */

    --color-accent:         #ff4d4d;       /* Primary accent - CTAs, active states, links */
    --color-accent-hover:   #ff6666;       /* Accent hover state */
    --color-accent-dark:    #cc3333;       /* Accent pressed state */
    --color-accent-warm:    #ff6a3d;       /* Pricing CTA gradient start from the design system */

    --color-success:        #4caf50;       /* Payment success, active membership */
    --color-warning:        #ff9800;       /* Expiring soon */
    --color-error:          #f44336;       /* Errors, failed payments */
    --color-info:           #2196f3;       /* Info notices */

    /* Tier badge colors — admin-configurable per tier; only pending is fixed */
    --color-pending:        #888888;       /* Neutral/unsubscribed state */

    /* === Semantic roles === */
    --fg-1:                 var(--color-text);
    --fg-2:                 var(--color-text-secondary);
    --fg-3:                 var(--color-text-muted);
    --fg-on-accent:         #ffffff;
    --bg-page:              var(--color-bg);
    --bg-surface:           var(--color-bg-elevated);
    --bg-surface-hover:     var(--color-bg-hover);
    --bg-input:             var(--color-bg-input);
    --border-hairline:      var(--color-border);
    --border-focus:         var(--color-border-focus);
    --accent:               var(--color-accent);
    --accent-hover:         var(--color-accent-hover);
    --accent-pressed:       var(--color-accent-dark);
    --scrim-radial:         radial-gradient(ellipse at center, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.30) 100%);
    --scrim-flat:           rgba(0, 0, 0, 0.80);
    --scrim-card:           rgba(0, 0, 0, 0.50);
    --tint-accent-12:       rgba(255, 77, 77, 0.12);
    --tint-accent-30:       rgba(255, 77, 77, 0.30);
    --tint-white-08:        rgba(255, 255, 255, 0.08);
    --tint-white-20:        rgba(255, 255, 255, 0.20);

    /* === Typography === */
    --font-family:          'Noto Sans TC', 'Microsoft JhengHei', 'PingFang TC', system-ui, sans-serif;
    --font-mono:            ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    --font-size-xs:         0.75rem;       /* 12px - badges, fine print */
    --font-size-sm:         0.875rem;      /* 14px - secondary text, metadata */
    --font-size-base:       1rem;          /* 16px - body text */
    --font-size-lg:         1.125rem;      /* 18px - subheadings */
    --font-size-xl:         1.5rem;        /* 24px - section titles */
    --font-size-2xl:        2rem;          /* 32px - page titles */
    --font-size-3xl:        2.5rem;        /* 40px - hero text */
    --line-height:          1.6;
    --line-height-normal:   var(--line-height);
    --line-height-tight:    1.3;
    --weight-regular:       400;
    --weight-medium:        500;
    --weight-semibold:      600;
    --weight-bold:          700;
    --weight-black:         900;

    /* === Spacing (8px grid) === */
    --space-xs:             0.25rem;       /* 4px */
    --space-sm:             0.5rem;        /* 8px */
    --space-md:             1rem;          /* 16px */
    --space-lg:             1.5rem;        /* 24px */
    --space-xl:             2rem;          /* 32px */
    --space-2xl:            3rem;          /* 48px */
    --space-3xl:            4rem;          /* 64px */

    /* === Layout === */
    --container-max:        1400px;        /* Max content width */
    --container-narrow:     800px;         /* Narrow content (forms, text) */
    --sidebar-width:        300px;         /* Optional sidebar */
    --header-height:        64px;          /* Fixed header height */
    --card-radius:          8px;           /* Border radius for cards */
    --radius-sm:            4px;           /* Small elements */
    --radius-md:            8px;           /* Alias for cards/highlight tiles */
    --radius-lg:            12px;          /* Modals, large cards */
    --radius-full:          9999px;        /* Pills, avatars */

    /* === Shadows === */
    --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md:            0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg:            0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-glow:          0 0 20px rgba(255, 77, 77, 0.3);  /* Accent glow for CTAs */
    --shadow-pricing:       0 8px 18px rgba(255, 77, 77, 0.28);

    /* === Transitions === */
    --transition-fast:      150ms ease;
    --transition-base:      250ms ease;
    --transition-slow:      400ms ease;

    /* === Z-Index Scale === */
    --z-dropdown:           100;
    --z-sticky:             200;
    --z-header:             300;
    --z-overlay:            400;
    --z-modal:              500;
    --z-toast:              600;

    /* === Video Player === */
    --player-controls-bg:   rgba(0, 0, 0, 0.7);
    --player-progress:      var(--color-accent);
    --player-buffer:        rgba(255, 255, 255, 0.3);
}