/* ============================================================
   tokens/semantic.css — Semantic design tokens for LPO Platform.
   Built on foundations/palette, spacing, typography, elevation, motion.
   This is the single source of truth for all design decisions.

   Both legacy alias systems are bridged here so existing view CSS
   continues to work without modification:
     • --fa-*  (main.css legacy)
     • --lpo-* (platform/design-tokens.css legacy)
   ============================================================ */

:root {

  /* ── Brand / semantic ──────────────────────────────────────────────────── */

  --color-primary:        var(--palette-navy-700);
  --color-primary-hover:  var(--palette-navy-900);
  --color-primary-light:  var(--palette-navy-100);
  --color-primary-10:     rgba(40, 54, 85, 0.1);
  --color-primary-20:     rgba(40, 54, 85, 0.2);

  --color-accent:         var(--palette-ink-24);
  --color-accent-hover:   rgba(15, 23, 42, 0.35);
  --color-accent-light:   rgba(15, 23, 42, 0.12);
  --color-accent-surface: rgba(15, 23, 42, 0.06);
  --color-accent-10:      rgba(15, 23, 42, 0.1);

  /* ── Surfaces ──────────────────────────────────────────────────────────── */

  --color-bg:      var(--palette-gray-50);
  --color-bg-alt:  var(--palette-gray-100);
  --color-surface: var(--palette-white);
  --color-border:  var(--palette-gray-200);
  --color-divider: var(--palette-gray-300);

  /* ── Text ──────────────────────────────────────────────────────────────── */

  --text-default:   var(--palette-navy-700);
  --text-secondary: var(--palette-gray-700);
  --text-muted:     var(--palette-gray-500);
  --text-on-dark:   var(--palette-white);

  /* ── Status ────────────────────────────────────────────────────────────── */

  --color-success:    var(--palette-green-700);
  --color-success-bg: var(--palette-green-100);
  --color-warning:    var(--palette-yellow-600);
  --color-warning-bg: var(--palette-yellow-100);
  --color-error:      var(--palette-red-600);
  --color-error-bg:   var(--palette-red-100);
  --color-info:       var(--palette-navy-700);
  --color-info-bg:    var(--palette-navy-100);

  /* ── Gradients ─────────────────────────────────────────────────────────── */

  --gradient-primary: linear-gradient(135deg, var(--palette-navy-700) 0%, var(--palette-navy-900) 100%);
  --gradient-surface: linear-gradient(135deg, var(--palette-gray-50) 0%, var(--palette-gray-100) 100%);

  /* ── Module identity ───────────────────────────────────────────────────── */

  --module-foodup:          var(--palette-navy-700);
  --module-foodup-light:    var(--palette-navy-100);
  --module-handycook:       var(--palette-ink-24);
  --module-handycook-light: var(--palette-amber-50);
  --module-lazyhands:       var(--palette-navy-500);
  --module-lazyhands-light: var(--palette-navy-100);
  --module-law:             var(--palette-law-800);
  --module-law-light:       var(--palette-law-50);

  /* ── Layout ────────────────────────────────────────────────────────────── */

  --layout-max-width:    1200px;
  --layout-navbar-height: 103px;

  /* ── Z-index ───────────────────────────────────────────────────────────── */

  --z-base:         1;
  --z-dropdown:     100;
  --z-sticky:       200;
  --z-fixed:        300;
  --z-modal-bg:     400;
  --z-modal:        500;
  --z-tooltip:      600;
  --z-notification: 700;
  --z-header:       1000;
  --z-max:          10000;


  /* ================================================================
     LEGACY ALIAS BRIDGE — --fa-* → new tokens
     Keeps all existing view CSS working without modification.
     ================================================================ */

  --fa-primary:          var(--color-primary);
  --fa-primary-hover:    var(--color-primary-hover);
  --fa-primary-light:    var(--palette-navy-500);
  --fa-primary-surface:  var(--color-primary-light);
  --fa-primary-10:       var(--color-primary-10);
  --fa-primary-20:       var(--color-primary-20);

  --fa-bg:               var(--color-surface);
  --fa-bg-alt:           var(--color-bg-alt);
  --fa-surface:          var(--color-surface);

  --fa-text-on-primary:  var(--text-on-dark);
  --fa-text-primary:     var(--text-default);
  --fa-text-secondary:   var(--text-secondary);
  --fa-text-muted:       var(--text-muted);

  --fa-accent:           var(--color-accent);
  --fa-accent-hover:     var(--color-accent-hover);
  --fa-accent-light:     var(--color-accent-light);
  --fa-accent-surface:   var(--color-accent-surface);
  --fa-accent-10:        var(--color-accent-10);

  --fa-gradient-primary: var(--gradient-primary);
  --fa-gradient-surface: var(--gradient-surface);

  --fa-success:          var(--color-success);
  --fa-success-bg:       var(--color-success-bg);
  --fa-warning:          var(--color-warning);
  --fa-warning-bg:       var(--color-warning-bg);
  --fa-error:            var(--color-error);
  --fa-error-bg:         var(--color-error-bg);
  --fa-info:             var(--color-info);
  --fa-info-bg:          var(--color-info-bg);

  --fa-border:           var(--color-border);

  /* z-index bridges (--z-index-* → --z-*) */
  --z-index-base:                     var(--z-base);
  --z-index-dropdown:                 var(--z-dropdown);
  --z-index-sticky:                   var(--z-sticky);
  --z-index-fixed:                    var(--z-fixed);
  --z-index-modal-backdrop:           var(--z-modal-bg);
  --z-index-modal:                    var(--z-modal);
  --z-index-tooltip:                  var(--z-tooltip);
  --z-index-notification:             var(--z-notification);
  --z-index-header:                   var(--z-header);
  --z-index-dropdown-content:         var(--z-header);
  --z-index-profile-dropdown:         9998;
  --z-index-profile-dropdown-content: 9999;
  --z-index-maximum:                  var(--z-max);


  /* ================================================================
     LEGACY ALIAS BRIDGE — --lpo-* → new tokens
     Keeps all existing platform CSS working without modification.
     ================================================================ */

  --lpo-primary:         var(--color-primary);
  --lpo-primary-hover:   var(--color-primary-hover);
  --lpo-primary-light:   var(--color-primary-light);
  --lpo-secondary:       var(--color-accent);
  --lpo-secondary-hover: var(--color-accent-hover);
  --lpo-secondary-light: var(--color-accent-surface);
  --lpo-accent:          var(--color-accent);
  --lpo-accent-hover:    var(--color-accent-hover);
  --lpo-accent-light:    var(--color-accent-surface);

  --lpo-bg:              var(--color-bg);
  --lpo-bg-alt:          var(--color-bg-alt);
  --lpo-surface:         var(--color-surface);
  --lpo-text:            var(--text-default);
  --lpo-text-secondary:  var(--text-secondary);
  --lpo-text-muted:      var(--text-muted);
  --lpo-border:          var(--color-border);
  --lpo-divider:         var(--color-divider);

  --lpo-success:         var(--color-success);
  --lpo-warning:         var(--color-warning);
  --lpo-error:           var(--color-error);
  --lpo-info:            var(--color-info);

  --lpo-shadow-sm:       var(--shadow-xs);
  --lpo-shadow:          var(--shadow-sm);
  --lpo-shadow-md:       var(--shadow-md);
  --lpo-shadow-lg:       var(--shadow-lg);

  --lpo-radius-sm:       var(--radius-sm);
  --lpo-radius:          var(--radius-md);
  --lpo-radius-md:       var(--radius-lg);
  --lpo-radius-lg:       var(--radius-xl);
  --lpo-radius-xl:       var(--radius-2xl);
  --lpo-radius-full:     var(--radius-full);

  --lpo-space-xs:        var(--space-1);
  --lpo-space-sm:        var(--space-2);
  --lpo-space-md:        var(--space-4);
  --lpo-space-lg:        var(--space-6);
  --lpo-space-xl:        var(--space-8);
  --lpo-space-2xl:       var(--space-12);
  --lpo-space-3xl:       var(--space-16);
  --lpo-space-4xl:       var(--space-24);

  --lpo-font-family:     var(--font-sans);
  --lpo-font-mono:       var(--font-mono);

  --lpo-text-xs:         var(--text-xs);
  --lpo-text-sm:         var(--text-sm);
  --lpo-text-base:       var(--text-base);
  --lpo-text-lg:         var(--text-lg);
  --lpo-text-xl:         var(--text-xl);
  --lpo-text-2xl:        var(--text-2xl);
  --lpo-text-3xl:        var(--text-3xl);
  --lpo-text-4xl:        var(--text-4xl);
  --lpo-text-5xl:        var(--text-5xl);

  --lpo-leading-tight:   var(--leading-tight);
  --lpo-leading-normal:  var(--leading-normal);
  --lpo-leading-relaxed: var(--leading-relaxed);

  --lpo-font-normal:     var(--weight-normal);
  --lpo-font-medium:     var(--weight-medium);
  --lpo-font-semibold:   var(--weight-semibold);
  --lpo-font-bold:       var(--weight-bold);

  --lpo-max-width:        var(--layout-max-width);
  --lpo-navbar-height:    var(--layout-navbar-height);

  --lpo-transition-fast:  var(--transition-fast);
  --lpo-transition:       var(--transition-normal);
  --lpo-transition-slow:  var(--transition-slow);

  --lpo-foodup:               var(--module-foodup);
  --lpo-foodup-light:         var(--module-foodup-light);
  --lpo-handycook:            var(--module-handycook);
  --lpo-handycook-light:      var(--module-handycook-light);
  --lpo-lazyhands:            var(--module-lazyhands);
  --lpo-lazyhands-light:      var(--module-lazyhands-light);
  --lpo-law-is-for-all:       var(--module-law);
  --lpo-law-is-for-all-light: var(--module-law-light);
}