/*
 * D’AUBE SONNTAG — semantic token runtime
 * Source authorities:
 * - config/brand/daube-rang-trong-whole-site-v1.json
 * - docs/design/DAUBE_RANG_TRONG_WHOLE_SITE_OVERHAUL_SPEC_V1.md
 *
 * Raw values live only in the primitive layer. Reusable components consume
 * semantic/component variables below and must not introduce route palettes.
 */

:root {
  /* RẠNG primitives */
  --ds-primitive-rang-canvas: #F8F4EC;
  --ds-primitive-rang-surface: #FFFDF8;
  --ds-primitive-rang-surface-raised: #EEE6D8;
  --ds-primitive-rang-text: #1B1A17;
  --ds-primitive-rang-text-muted: #655F56;
  --ds-primitive-rang-line: rgba(27,26,23,0.14);
  --ds-primitive-rang-bronze: #A97742;
  --ds-primitive-rang-bronze-light: #DEC08F;
  --ds-primitive-rang-sage: #A8B7A6;
  --ds-primitive-rang-sky: #A8C7D3;
  --ds-primitive-rang-danger: #9B554F;
  --ds-primitive-rang-success: #5F8068;

  /* TRONG primitives */
  --ds-primitive-trong-canvas: #0B0C0B;
  --ds-primitive-trong-surface: #121411;
  --ds-primitive-trong-surface-raised: #1A1D19;
  --ds-primitive-trong-text: #F3EFE7;
  --ds-primitive-trong-text-muted: #AAA49A;
  --ds-primitive-trong-line: rgba(243,239,231,0.14);
  --ds-primitive-trong-bronze: #D1A36A;
  --ds-primitive-trong-bronze-light: #E4C79B;
  --ds-primitive-trong-sage: #829688;
  --ds-primitive-trong-sky: #7897A6;
  --ds-primitive-trong-danger: #C17B73;
  --ds-primitive-trong-success: #88A88F;

  /* Shared spacing primitives */
  --ds-space-0: 0;
  --ds-space-1: 2px;
  --ds-space-2: 4px;
  --ds-space-3: 6px;
  --ds-space-4: 8px;
  --ds-space-5: 12px;
  --ds-space-6: 16px;
  --ds-space-7: 20px;
  --ds-space-8: 24px;
  --ds-space-9: 32px;
  --ds-space-10: 40px;
  --ds-space-11: 48px;
  --ds-space-12: 64px;
  --ds-space-13: 80px;
  --ds-space-14: 96px;
  --ds-space-15: 128px;

  /* Radius primitives */
  --ds-radius-none: 0;
  --ds-radius-xs: 4px;
  --ds-radius-sm: 8px;
  --ds-radius-md: 12px;
  --ds-radius-lg: 16px;
  --ds-radius-xl: 24px;
  --ds-radius-pill: 999px;
  --ds-radius-round: 50%;

  /* Motion primitives. Ranges are governed by the Interface Constitution. */
  --ds-motion-instant: 100ms;
  --ds-motion-micro: 150ms;
  --ds-motion-standard: 220ms;
  --ds-motion-expressive: 400ms;
  --ds-motion-cinematic: 800ms;
  --ds-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ds-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Layout primitives */
  --ds-content-max: 1600px;
  --ds-reading-min: 720px;
  --ds-reading-max: 800px;
  --ds-grid-desktop-columns: 12;
  --ds-grid-tablet-columns: 8;
  --ds-grid-mobile-columns: 4;

  /* Semantic spacing aliases */
  --ds-space-page-inline: clamp(var(--ds-space-6), 4vw, var(--ds-space-12));
  --ds-space-section-y: clamp(var(--ds-space-11), 8vw, var(--ds-space-15));
  --ds-space-card-padding: clamp(var(--ds-space-6), 2vw, var(--ds-space-8));
  --ds-space-control-gap: var(--ds-space-4);
  --ds-space-content-gap: var(--ds-space-8);

  /* Semantic geometry */
  --ds-radius-control: var(--ds-radius-md);
  --ds-radius-card: var(--ds-radius-lg);
  --ds-radius-dialog: var(--ds-radius-xl);
  --ds-radius-media: var(--ds-radius-lg);

  /* Accessibility remains independent from art direction. */
  --ds-focus-width: 2px;
  --ds-focus-offset: 3px;
  --ds-motion-scale: 1;
  --ds-media-autoplay: 1;
}

:root,
[data-daube-mode="rang"] {
  color-scheme: light;
  --ds-canvas: var(--ds-primitive-rang-canvas);
  --ds-surface-primary: var(--ds-primitive-rang-surface);
  --ds-surface-elevated: var(--ds-primitive-rang-surface-raised);
  --ds-text-primary: var(--ds-primitive-rang-text);
  --ds-text-secondary: var(--ds-primitive-rang-text-muted);
  --ds-border-subtle: var(--ds-primitive-rang-line);
  --ds-accent: var(--ds-primitive-rang-bronze);
  --ds-accent-soft: var(--ds-primitive-rang-bronze-light);
  --ds-accent-sage: var(--ds-primitive-rang-sage);
  --ds-accent-sky: var(--ds-primitive-rang-sky);
  --ds-status-danger: var(--ds-primitive-rang-danger);
  --ds-status-success: var(--ds-primitive-rang-success);
  --ds-focus: var(--ds-primitive-rang-bronze);
  --ds-profile-accent: var(--ds-accent);
  --ds-profile-accent-soft: var(--ds-accent-soft);
}

[data-daube-mode="trong"] {
  color-scheme: dark;
  --ds-canvas: var(--ds-primitive-trong-canvas);
  --ds-surface-primary: var(--ds-primitive-trong-surface);
  --ds-surface-elevated: var(--ds-primitive-trong-surface-raised);
  --ds-text-primary: var(--ds-primitive-trong-text);
  --ds-text-secondary: var(--ds-primitive-trong-text-muted);
  --ds-border-subtle: var(--ds-primitive-trong-line);
  --ds-accent: var(--ds-primitive-trong-bronze);
  --ds-accent-soft: var(--ds-primitive-trong-bronze-light);
  --ds-accent-sage: var(--ds-primitive-trong-sage);
  --ds-accent-sky: var(--ds-primitive-trong-sky);
  --ds-status-danger: var(--ds-primitive-trong-danger);
  --ds-status-success: var(--ds-primitive-trong-success);
  --ds-focus: var(--ds-primitive-trong-bronze-light);
  --ds-profile-accent: var(--ds-accent);
  --ds-profile-accent-soft: var(--ds-accent-soft);
}

/* Component-role aliases. */
:root {
  --ds-button-primary-bg: var(--ds-accent);
  --ds-button-primary-text: var(--ds-canvas);
  --ds-card-bg: var(--ds-surface-primary);
  --ds-card-border: var(--ds-border-subtle);
  --ds-nav-bg: var(--ds-canvas);
  --ds-nav-text: var(--ds-text-primary);
  --ds-state-bg: var(--ds-surface-elevated);
  --ds-state-text: var(--ds-text-primary);
}

[data-daube-contrast="high"] {
  --ds-focus-width: 3px;
  --ds-border-subtle: currentColor;
}

[data-daube-reduced-motion="true"] {
  --ds-motion-instant: 1ms;
  --ds-motion-micro: 1ms;
  --ds-motion-standard: 1ms;
  --ds-motion-expressive: 1ms;
  --ds-motion-cinematic: 1ms;
  --ds-motion-scale: 0;
}

[data-daube-data-saver="true"] {
  --ds-media-autoplay: 0;
}