/* ============================================
   Modern Blinds — Semantic Design Tokens (Tier 2)
   ============================================
   Intent aliases. References ONLY primitives from tokens-primitive.css.
   Load order: tokens-primitive → tokens-semantic → tokens-compat → style/lp.
   ============================================ */

@layer tokens {
  :root {
    /* ---------- TEXT ---------- */
    --color-text-primary:   var(--color-brand-primary);
    --color-text-secondary: var(--gray-700);
    --color-text-muted:     var(--gray-500);
    --color-text-subtle:    var(--gray-400);
    --color-text-inverse:   var(--color-white);
    --color-text-body:      var(--gray-600);  /* default paragraph copy */
    --color-text-link:      var(--color-brand-accent);

    /* ---------- BACKGROUND ---------- */
    --color-bg-surface:    var(--color-white);
    --color-bg-elevated:   var(--gray-50);
    --color-bg-muted:      var(--gray-100);
    --color-bg-inverted:   var(--color-brand-primary-dark);
    --color-bg-accent:     var(--color-brand-accent-light);

    /* ---------- BORDER ---------- */
    --color-border-subtle:  var(--gray-200);
    --color-border-default: var(--gray-300);
    --color-border-strong:  var(--gray-500);

    /* ---------- ACCENT + INTERACTIVE ---------- */
    --color-accent-default: var(--color-brand-accent);
    --color-accent-hover:   var(--color-brand-accent-dark);
    --color-accent-soft:    var(--color-brand-accent-light);

    /* ---------- FOCUS ---------- */
    --color-focus-ring: var(--color-brand-accent);

    /* ---------- MOTION ---------- */
    --motion-hover:     var(--duration-fast);
    --motion-transition: var(--duration-normal);
  }
}