/*
 * My Travel Planner — Design Tokens
 * Single source of truth for all CSS custom properties.
 * Import this file FIRST before any other MTP stylesheet.
 * See: documentation/UI-DESIGN-SPEC.md
 */

/* ── Light Mode (Default) ─────────────────────────────────────────────── */

.mtp-planner-widget {

    /* ── Colors: Primary ──────────────────────────────────────────────── */
    --mtp-primary:        #0F6FFF;
    --mtp-primary-dark:   #0052CC;
    --mtp-primary-light:  #E8F1FF;

    /* ── Colors: Accent ───────────────────────────────────────────────── */
    --mtp-accent:         #FF6B35;
    --mtp-accent-light:   #FFF0EB;

    /* ── Colors: Scuba Vertical ───────────────────────────────────────── */
    --mtp-scuba:          #00B09B;
    --mtp-scuba-light:    #E0F7F5;

    /* ── Colors: Surfaces ─────────────────────────────────────────────── */
    --mtp-surface:        #FFFFFF;
    --mtp-surface-2:      #F7F7F5;
    --mtp-surface-3:      #EFEFED;

    /* ── Colors: Text ─────────────────────────────────────────────────── */
    --mtp-text:           #111111;
    --mtp-text-2:         #555555;
    --mtp-text-muted:     #9B9B9B;
    --mtp-text-inverse:   #FFFFFF;

    /* ── Colors: Borders ──────────────────────────────────────────────── */
    --mtp-border:         #E8E8E8;
    --mtp-border-strong:  #C8C8C8;

    /* ── Colors: Semantic ─────────────────────────────────────────────── */
    --mtp-success:        #00A86B;
    --mtp-success-light:  #E5F7F0;
    --mtp-warning:        #F59E0B;
    --mtp-warning-light:  #FFFBEB;
    --mtp-error:          #E53E3E;
    --mtp-error-light:    #FEF2F2;

    /* ── Typography ───────────────────────────────────────────────────── */
    --mtp-font-display:   'Plus Jakarta Sans', system-ui, sans-serif;
    --mtp-font-body:      -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

    --mtp-text-display:   700 40px/1.1 var(--mtp-font-display);
    --mtp-text-h1:        700 32px/1.2 var(--mtp-font-display);
    --mtp-text-h2:        600 24px/1.25 var(--mtp-font-display);
    --mtp-text-h3:        600 18px/1.35 var(--mtp-font-body);
    --mtp-text-h4:        600 15px/1.4 var(--mtp-font-body);
    --mtp-text-body-lg:   400 17px/1.6 var(--mtp-font-body);
    --mtp-text-body:      400 15px/1.6 var(--mtp-font-body);
    --mtp-text-body-sm:   400 13px/1.5 var(--mtp-font-body);
    --mtp-text-caption:   400 12px/1.4 var(--mtp-font-body);
    --mtp-text-label:     500 12px/1.2 var(--mtp-font-body);
    --mtp-text-btn:       600 14px/1 var(--mtp-font-body);
    --mtp-text-overline:  600 11px/1 var(--mtp-font-body);

    /* ── Spacing (8-point grid) ───────────────────────────────────────── */
    --mtp-space-1:   4px;
    --mtp-space-2:   8px;
    --mtp-space-3:   12px;
    --mtp-space-4:   16px;
    --mtp-space-5:   20px;
    --mtp-space-6:   24px;
    --mtp-space-8:   32px;
    --mtp-space-10:  40px;
    --mtp-space-12:  48px;
    --mtp-space-16:  64px;

    /* ── Border Radius ────────────────────────────────────────────────── */
    --mtp-radius-sm:   4px;
    --mtp-radius-md:   8px;
    --mtp-radius-lg:   12px;
    --mtp-radius-xl:   16px;
    --mtp-radius-2xl:  24px;
    --mtp-radius-full: 9999px;

    /* ── Elevation / Shadow ───────────────────────────────────────────── */
    --mtp-shadow-sm:    0 1px 3px rgba(0,0,0,0.08);
    --mtp-shadow-md:    0 4px 12px rgba(0,0,0,0.10);
    --mtp-shadow-lg:    0 8px 24px rgba(0,0,0,0.12);
    --mtp-shadow-xl:    0 16px 48px rgba(0,0,0,0.15);
    --mtp-shadow-focus: 0 0 0 3px rgba(15,111,255,0.3);

    /* ── Motion ───────────────────────────────────────────────────────── */
    --mtp-ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
    --mtp-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --mtp-ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
    --mtp-duration-fast:     100ms;
    --mtp-duration-base:     150ms;
    --mtp-duration-moderate:  250ms;
    --mtp-duration-slow:     400ms;

    /* ── Legacy Aliases (backward compat with existing templates) ──── */
    --mtp-bg:              var(--mtp-surface);
    --mtp-bg-secondary:    var(--mtp-surface-2);
    --mtp-bg-tertiary:     var(--mtp-surface-3);
    --mtp-primary-hover:   var(--mtp-primary-dark);
    --mtp-primary-text:    var(--mtp-text-inverse);
    --mtp-error-bg:        var(--mtp-error-light);
    --mtp-radius:          var(--mtp-radius-lg);
    --mtp-radius-xs:       var(--mtp-radius-sm);
    --mtp-shadow:          var(--mtp-shadow-sm);
    --mtp-font:            var(--mtp-font-body);
    --mtp-transition:      0.2s ease;
}


/* ── Dark Mode ────────────────────────────────────────────────────────── */

.mtp-planner-widget.mtp-dark {

    /* Surfaces */
    --mtp-surface:        #1A1A2E;
    --mtp-surface-2:      #16213E;
    --mtp-surface-3:      #0F3460;

    /* Text */
    --mtp-text:           #F0F0F0;
    --mtp-text-2:         #A0A0B0;
    --mtp-text-muted:     #606070;
    --mtp-text-inverse:   #111111;

    /* Primary (lighter for dark bg legibility) */
    --mtp-primary:        #4D8FFF;
    --mtp-primary-dark:   #2B6FDD;
    --mtp-primary-light:  rgba(77,143,255,0.15);

    /* Accent */
    --mtp-accent:         #FF8055;
    --mtp-accent-light:   rgba(255,128,85,0.15);

    /* Borders */
    --mtp-border:         #2A2A40;
    --mtp-border-strong:  #3A3A55;

    /* Semantic */
    --mtp-success:        #00D68A;
    --mtp-success-light:  rgba(0,214,138,0.15);
    --mtp-error:          #FF5B5B;
    --mtp-error-light:    rgba(255,91,91,0.15);
    --mtp-warning:        #FBBF24;
    --mtp-warning-light:  rgba(251,191,36,0.15);

    /* Shadows (subtler in dark) */
    --mtp-shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
    --mtp-shadow-md:  0 4px 12px rgba(0,0,0,0.4);
    --mtp-shadow-lg:  0 8px 24px rgba(0,0,0,0.5);
    --mtp-shadow-xl:  0 16px 48px rgba(0,0,0,0.6);
}