@import url("/assets/branding.css");

:root {
    color-scheme: light dark;
}

  /* =========================================
   * APPLE-INSPIRED: clean, low-saturation, subtle accent
   * ========================================= */

  :root[data-vk-style="apple"][data-theme="light"] {
    color-scheme: light;
    --vk-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
    --vk-font-serif: "New York Small", "Georgia", serif;

    --vk-color-bg-canvas: #f5f5f7;        /* neutral grey background */
    --vk-color-bg-surface: #ffffff;       /* pure white cards */
    --vk-color-bg-elevated: #f9f9fb;      /* slightly lifted panels */

    --vk-color-fg-primary: #111111;       /* strong text */
    --vk-color-fg-muted: #6e6e73;         /* Apple-style muted text */

    --vk-color-border-subtle: #d2d2d7;
    --vk-color-border-strong: #a1a1a6;

    --vk-color-shadow: rgba(15, 15, 20, 0.08);
    --vk-color-shadow-strong: rgba(0, 0, 0, 0.14);

    --vk-color-accent-brand: #0071e3;     /* Apple blue (buttons, links) */
    --vk-color-accent-contrast: #ffffff;

    --vk-color-status-success: #248d60;
    --vk-color-status-warning: #c27400;
    --vk-color-status-danger: #d03d3d;
    --vk-color-status-info: #1765d8;

    --vk-color-focus-ring: #0071e3;
    --vk-color-pill-bg: rgba(0, 0, 0, 0.04);

    --vk-shadow-soft: 0 18px 45px var(--vk-color-shadow);
    --vk-shadow-float: 0 30px 80px var(--vk-color-shadow-strong);
  }

  :root[data-vk-style="apple"][data-theme="dark"] {
    color-scheme: dark;
    --vk-color-bg-canvas: #050509;
    --vk-color-bg-surface: #101014;
    --vk-color-bg-elevated: #18181c;

    --vk-color-fg-primary: #f5f5f7;
    --vk-color-fg-muted: #98989f;

    --vk-color-border-subtle: #26262c;
    --vk-color-border-strong: #3a3a42;

    --vk-color-shadow: rgba(0, 0, 0, 0.6);
    --vk-color-shadow-strong: rgba(0, 0, 0, 0.8);

    --vk-color-accent-brand: #0a84ff;
    --vk-color-accent-contrast: #0b0b11;

    --vk-color-status-success: #30d158;
    --vk-color-status-warning: #ffd60a;
    --vk-color-status-danger: #ff453a;
    --vk-color-status-info: #64d2ff;

    --vk-color-focus-ring: #0a84ff;
    --vk-color-pill-bg: rgba(255, 255, 255, 0.08);

    --vk-shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.7);
    --vk-shadow-float: 0 30px 80px rgba(0, 0, 0, 0.9);
  }

  /* =========================================
   * META-INSPIRED: vivid blue, slightly more “product-y”
   * ========================================= */

  :root[data-vk-style="meta"][data-theme="light"] {
    color-scheme: light;
    --vk-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --vk-color-bg-canvas: #f2f4f7;        /* cool grey */
    --vk-color-bg-surface: #ffffff;
    --vk-color-bg-elevated: #eef3ff;      /* bluish elevated surfaces */

    --vk-color-fg-primary: #111827;
    --vk-color-fg-muted: #6b7280;

    --vk-color-border-subtle: #d1d5db;
    --vk-color-border-strong: #9ca3af;

    --vk-color-shadow: rgba(15, 23, 42, 0.12);
    --vk-color-shadow-strong: rgba(15, 23, 42, 0.22);

    --vk-color-accent-brand: #0866ff;     /* Meta blue-ish */
    --vk-color-accent-contrast: #ffffff;

    --vk-color-status-success: #16a34a;
    --vk-color-status-warning: #d97706;
    --vk-color-status-danger: #dc2626;
    --vk-color-status-info: #2563eb;

    --vk-color-focus-ring: #2563eb;
    --vk-color-pill-bg: rgba(37, 99, 235, 0.06);

    --vk-shadow-soft: 0 14px 40px var(--vk-color-shadow);
    --vk-shadow-float: 0 26px 70px var(--vk-color-shadow-strong);
  }

  :root[data-vk-style="meta"][data-theme="dark"] {
    color-scheme: dark;
    --vk-color-bg-canvas: #020617;
    --vk-color-bg-surface: #020617;
    --vk-color-bg-elevated: #0b1220;

    --vk-color-fg-primary: #f9fafb;
    --vk-color-fg-muted: #9ca3af;

    --vk-color-border-subtle: #1e293b;
    --vk-color-border-strong: #334155;

    --vk-color-shadow: rgba(15, 23, 42, 0.7);
    --vk-color-shadow-strong: rgba(15, 23, 42, 0.9);

    --vk-color-accent-brand: #60a5fa;     /* softer blue in dark mode */
    --vk-color-accent-contrast: #020617;

    --vk-color-status-success: #22c55e;
    --vk-color-status-warning: #fbbf24;
    --vk-color-status-danger: #f97373;
    --vk-color-status-info: #38bdf8;

    --vk-color-focus-ring: #60a5fa;
    --vk-color-pill-bg: rgba(148, 163, 184, 0.12);

    --vk-shadow-soft: 0 18px 50px rgba(15, 23, 42, 0.75);
    --vk-shadow-float: 0 30px 90px rgba(15, 23, 42, 0.95);
  }

  /* =========================================
   * AIRBNB-INSPIRED: warm, friendly, rounded
   * ========================================= */

  :root[data-vk-style="airbnb"][data-theme="light"] {
    color-scheme: light;
    --vk-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --vk-color-bg-canvas: #fef8f4;        /* warm off-white */
    --vk-color-bg-surface: #ffffff;
    --vk-color-bg-elevated: #fff3ec;      /* soft peach */

    --vk-color-fg-primary: #222222;
    --vk-color-fg-muted: #717171;

    --vk-color-border-subtle: #f1e3d6;
    --vk-color-border-strong: #e0c8b5;

    --vk-color-shadow: rgba(160, 82, 45, 0.10);
    --vk-color-shadow-strong: rgba(120, 60, 30, 0.20);

    --vk-color-accent-brand: #ff385c;     /* Airbnb core pink/red */
    --vk-color-accent-contrast: #ffffff;

    --vk-color-status-success: #15803d;
    --vk-color-status-warning: #d97706;
    --vk-color-status-danger: #e11d48;
    --vk-color-status-info: #2563eb;

    --vk-color-focus-ring: #ff385c;
    --vk-color-pill-bg: rgba(255, 56, 92, 0.08);

    --vk-radius-xs: 0.375rem;
    --vk-radius-sm: 0.75rem;
    --vk-radius-md: 1rem;
    --vk-radius-lg: 1.75rem;
    --vk-radius-pill: 999px;

    --vk-shadow-soft: 0 18px 45px var(--vk-color-shadow);
    --vk-shadow-float: 0 30px 80px var(--vk-color-shadow-strong);
  }

  :root[data-vk-style="airbnb"][data-theme="dark"] {
    color-scheme: dark;
    --vk-color-bg-canvas: #121212;
    --vk-color-bg-surface: #181818;
    --vk-color-bg-elevated: #201818;

    --vk-color-fg-primary: #f5f5f5;
    --vk-color-fg-muted: #a3a3a3;

    --vk-color-border-subtle: #2c2c2c;
    --vk-color-border-strong: #3f3f3f;

    --vk-color-shadow: rgba(0, 0, 0, 0.7);
    --vk-color-shadow-strong: rgba(0, 0, 0, 0.9);

    --vk-color-accent-brand: #ff5a7a;     /* slightly brighter for dark */
    --vk-color-accent-contrast: #140b0b;

    --vk-color-status-success: #4ade80;
    --vk-color-status-warning: #fbbf24;
    --vk-color-status-danger: #fb7185;
    --vk-color-status-info: #38bdf8;

    --vk-color-focus-ring: #ff5a7a;
    --vk-color-pill-bg: rgba(255, 255, 255, 0.06);

    --vk-radius-xs: 0.375rem;
    --vk-radius-sm: 0.75rem;
    --vk-radius-md: 1rem;
    --vk-radius-lg: 1.75rem;
    --vk-radius-pill: 999px;

    --vk-shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.8);
    --vk-shadow-float: 0 36px 100px rgba(0, 0, 0, 0.95);
  }