/**
 * Perko Soft Utility System — Design Tokens
 * Version: 1.0
 *
 * Rule: Components must only consume semantic or component tokens.
 * Never use primitive palette tokens directly inside a component.
 */

:root {
  /* ------------------------------------------------------------
     1. Primitive color palette
     Never reference these directly from Bricks components.
     ------------------------------------------------------------ */
  --pk-color-neutral-0: #ffffff;
  --pk-color-neutral-25: #faf9f4;
  --pk-color-neutral-50: #f5f5f0;
  --pk-color-neutral-100: #eef0ed;
  --pk-color-neutral-150: #e5e6e1;
  --pk-color-neutral-200: #d8dbd6;
  --pk-color-neutral-400: #8a918d;
  --pk-color-neutral-500: #69706d;
  --pk-color-neutral-600: #555c59;
  --pk-color-neutral-700: #3b403e;
  --pk-color-neutral-800: #252927;
  --pk-color-neutral-900: #171a19;
  --pk-color-neutral-950: #111311;

  --pk-color-sage-50: #eef3e3;
  --pk-color-sage-100: #ddec8b;
  --pk-color-sage-200: #c9e0d7;
  --pk-color-sage-500: #7f9d93;
  --pk-color-sage-600: #78978d;

  --pk-color-sky-100: #cbddea;
  --pk-color-sand-100: #ecd7c2;
  --pk-color-coral-100: #eab7aa;

  /* ------------------------------------------------------------
     2. Primitive alpha palette
     ------------------------------------------------------------ */
  --pk-alpha-white-08: rgb(255 255 255 / 8%);
  --pk-alpha-white-16: rgb(255 255 255 / 16%);
  --pk-alpha-white-17: rgb(255 255 255 / 17%);
  --pk-alpha-white-35: rgb(255 255 255 / 35%);
  --pk-alpha-white-42: rgb(255 255 255 / 42%);
  --pk-alpha-white-43: rgb(255 255 255 / 43%);
  --pk-alpha-white-44: rgb(255 255 255 / 44%);
  --pk-alpha-white-50: rgb(255 255 255 / 50%);
  --pk-alpha-white-53: rgb(255 255 255 / 53%);
  --pk-alpha-white-58: rgb(255 255 255 / 58%);
  --pk-alpha-white-64: rgb(255 255 255 / 64%);
  --pk-alpha-white-72: rgb(255 255 255 / 72%);
  --pk-alpha-white-82: rgb(255 255 255 / 82%);
  --pk-alpha-white-92: rgb(255 255 255 / 92%);

  --pk-alpha-ink-10: rgb(23 26 25 / 10%);
  --pk-alpha-ink-13: rgb(23 26 25 / 13%);
  --pk-alpha-ink-16: rgb(23 26 25 / 16%);
  --pk-alpha-ink-20: rgb(23 26 25 / 20%);
  --pk-alpha-ink-36: rgb(23 26 25 / 36%);
  --pk-alpha-sage-13: rgb(127 157 147 / 13%);
  --pk-alpha-sage-35: rgb(201 224 215 / 35%);

  /* ------------------------------------------------------------
     3. Semantic color tokens — Light theme
     Use these in components and Bricks Global Classes.
     ------------------------------------------------------------ */
  --pk-color-bg-canvas: var(--pk-color-neutral-100);
  --pk-color-bg-surface: var(--pk-color-neutral-25);
  --pk-color-bg-surface-subtle: var(--pk-alpha-white-44);
  --pk-color-bg-surface-hover: var(--pk-color-neutral-0);
  --pk-color-bg-inverse: var(--pk-color-neutral-900);
  --pk-color-bg-overlay: var(--pk-alpha-white-64);

  --pk-color-text-primary: var(--pk-color-neutral-900);
  --pk-color-text-secondary: var(--pk-color-neutral-500);
  --pk-color-text-tertiary: var(--pk-color-neutral-600);
  --pk-color-text-inverse: var(--pk-color-neutral-0);
  --pk-color-text-inverse-muted: var(--pk-color-neutral-200);
  --pk-color-text-disabled: var(--pk-color-neutral-400);

  --pk-color-border-default: var(--pk-alpha-ink-13);
  --pk-color-border-strong: var(--pk-alpha-ink-16);
  --pk-color-border-glass: var(--pk-alpha-white-82);
  --pk-color-border-focus: var(--pk-color-sage-500);

  --pk-color-action-primary: var(--pk-color-neutral-900);
  --pk-color-action-primary-text: var(--pk-color-neutral-0);
  --pk-color-action-secondary: var(--pk-alpha-white-43);
  --pk-color-action-secondary-text: var(--pk-color-neutral-900);
  --pk-color-focus-ring: var(--pk-alpha-sage-13);

  --pk-color-status-success-bg: var(--pk-color-sage-100);
  --pk-color-status-success-text: var(--pk-color-neutral-700);
  --pk-color-status-info-bg: var(--pk-color-sky-100);
  --pk-color-status-info-text: var(--pk-color-neutral-700);
  --pk-color-status-warning-bg: var(--pk-color-sand-100);
  --pk-color-status-warning-text: var(--pk-color-neutral-700);
  --pk-color-status-danger-bg: var(--pk-color-coral-100);
  --pk-color-status-danger-text: var(--pk-color-neutral-800);
  --pk-color-status-neutral-bg: var(--pk-color-neutral-150);
  --pk-color-status-neutral-text: var(--pk-color-neutral-700);

  --pk-color-data-primary: var(--pk-color-sage-600);
  --pk-color-data-soft: var(--pk-color-sage-200);

  /* ------------------------------------------------------------
     4. Liquid Glass component tokens
     ------------------------------------------------------------ */
  --pk-glass-bg: var(--pk-alpha-white-64);
  --pk-glass-bg-strong: var(--pk-alpha-white-72);
  --pk-glass-bg-subtle: var(--pk-alpha-white-50);
  --pk-glass-border: var(--pk-color-border-glass);
  --pk-glass-highlight: var(--pk-color-neutral-0);
  --pk-glass-inner-shadow: inset 0 1px 0 var(--pk-alpha-white-92),
    inset 0 -1px 0 var(--pk-alpha-white-35);
  --pk-glass-blur: 34px;
  --pk-glass-saturation: 145%;
  --pk-glass-shadow: var(--pk-glass-inner-shadow),
    0 18px 52px rgb(38 48 44 / 12%),
    0 1px 0 rgb(255 255 255 / 45%);
  --pk-glass-shadow-strong: var(--pk-glass-inner-shadow),
    0 28px 80px rgb(38 48 44 / 18%),
    0 1px 0 rgb(255 255 255 / 55%);
  --pk-glass-tint-top: linear-gradient(
    180deg,
    rgb(255 255 255 / 42%),
    rgb(255 255 255 / 8%)
  );
  --pk-scrim-bg: rgb(23 26 25 / 36%);
  --pk-scrim-glow-info: rgb(203 221 234 / 26%);
  --pk-scrim-glow-warm: rgb(236 215 194 / 26%);

  /* ------------------------------------------------------------
     5. Typography tokens
     ------------------------------------------------------------ */
  --pk-font-family-sans: Inter, "Noto Sans TC", "PingFang TC",
    "Microsoft JhengHei", sans-serif;
  --pk-font-weight-regular: 400;
  --pk-font-weight-medium: 520;
  --pk-font-weight-semibold: 600;
  --pk-font-weight-bold: 800;

  --pk-font-size-2xs: 0.5rem;
  --pk-font-size-xs: 0.5625rem;
  --pk-font-size-sm: 0.625rem;
  --pk-font-size-md: 0.6875rem;
  --pk-font-size-lg: 0.8125rem;
  --pk-font-size-title-sm: 1.125rem;
  --pk-font-size-title-md: 1.6875rem;
  --pk-font-size-display: clamp(2.375rem, 5vw, 4.25rem);

  --pk-line-height-tight: 0.95;
  --pk-line-height-heading: 1.05;
  --pk-line-height-body: 1.6;
  --pk-line-height-relaxed: 1.7;

  --pk-letter-spacing-display: -0.065em;
  --pk-letter-spacing-heading: -0.04em;
  --pk-letter-spacing-label: 0.13em;

  /* ------------------------------------------------------------
     6. Spacing tokens — 4px base
     ------------------------------------------------------------ */
  --pk-space-0: 0;
  --pk-space-1: 0.25rem;
  --pk-space-2: 0.5rem;
  --pk-space-3: 0.75rem;
  --pk-space-4: 1rem;
  --pk-space-5: 1.25rem;
  --pk-space-6: 1.5rem;
  --pk-space-8: 2rem;
  --pk-space-10: 2.5rem;
  --pk-space-12: 3rem;
  --pk-space-16: 4rem;
  --pk-space-20: 5rem;

  /* ------------------------------------------------------------
     7. Radius tokens
     ------------------------------------------------------------ */
  --pk-radius-xs: 0.375rem;
  --pk-radius-sm: 0.6875rem;
  --pk-radius-md: 0.8125rem;
  --pk-radius-lg: 1rem;
  --pk-radius-xl: 1.5rem;
  --pk-radius-2xl: 1.8125rem;
  --pk-radius-round: 999px;

  /* ------------------------------------------------------------
     8. Shadow & motion tokens
     ------------------------------------------------------------ */
  --pk-shadow-none: none;
  --pk-shadow-float: 0 18px 50px rgb(38 48 44 / 8%);
  --pk-shadow-product: 18px 26px 48px rgb(72 56 50 / 15%);
  --pk-shadow-focus: 0 0 0 3px var(--pk-color-focus-ring);

  --pk-motion-fast: 120ms;
  --pk-motion-normal: 200ms;
  --pk-motion-slow: 400ms;
  --pk-ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* ------------------------------------------------------------
     9. Layout tokens
     ------------------------------------------------------------ */
  --pk-layout-page-gap: 0.625rem;
  --pk-layout-page-padding: 0.625rem;
  --pk-layout-sidebar-width: 15rem;
  --pk-layout-content-max: 88.75rem;
  --pk-layout-readable-max: 28rem;
}

/* Dark context: use on admin login or deliberately dark sections. */
[data-pk-theme="dark"] {
  --pk-color-bg-canvas: var(--pk-color-neutral-950);
  --pk-color-bg-surface: var(--pk-color-neutral-900);
  --pk-color-bg-surface-subtle: var(--pk-alpha-white-08);
  --pk-color-bg-surface-hover: var(--pk-alpha-white-16);
  --pk-color-bg-inverse: var(--pk-color-neutral-0);

  --pk-color-text-primary: var(--pk-color-neutral-0);
  --pk-color-text-secondary: var(--pk-color-neutral-200);
  --pk-color-text-tertiary: var(--pk-color-neutral-400);
  --pk-color-text-inverse: var(--pk-color-neutral-900);

  --pk-color-border-default: var(--pk-alpha-white-16);
  --pk-color-border-strong: var(--pk-alpha-white-17);

  --pk-color-action-primary: var(--pk-color-sage-100);
  --pk-color-action-primary-text: var(--pk-color-neutral-900);
  --pk-color-action-secondary: var(--pk-alpha-white-08);
  --pk-color-action-secondary-text: var(--pk-color-neutral-0);
}

/* Reference global classes for Bricks. */
.pk-glass {
  background: var(--pk-glass-tint-top), var(--pk-glass-bg);
  border: 1px solid var(--pk-glass-border);
  box-shadow: var(--pk-glass-shadow);
  backdrop-filter: blur(var(--pk-glass-blur))
    saturate(var(--pk-glass-saturation));
  -webkit-backdrop-filter: blur(var(--pk-glass-blur))
    saturate(var(--pk-glass-saturation));
}

.pk-surface {
  color: var(--pk-color-text-primary);
  background: var(--pk-color-bg-surface);
  border: 1px solid var(--pk-color-border-default);
  border-radius: var(--pk-radius-xl);
}

.pk-status--success {
  color: var(--pk-color-status-success-text);
  background: var(--pk-color-status-success-bg);
}

.pk-status--info {
  color: var(--pk-color-status-info-text);
  background: var(--pk-color-status-info-bg);
}

.pk-status--warning {
  color: var(--pk-color-status-warning-text);
  background: var(--pk-color-status-warning-bg);
}

.pk-status--danger {
  color: var(--pk-color-status-danger-text);
  background: var(--pk-color-status-danger-bg);
}