/**
 * Platform Layout CSS Design Tokens
 *
 * Scoped to .platform-layout — provides the full visual language
 * for all platform layout widgets (Batch 1 foundation).
 *
 * Themes:
 *  - Default / [data-theme="light"]  → light palette
 *  - [data-theme="dark"]             → dark palette
 *  - @media (prefers-color-scheme: dark) without data-theme → system dark
 */

/* ─────────────────────────────────────────────
   Light theme (default)
   ───────────────────────────────────────────── */
.platform-layout,
[data-theme="light"] .platform-layout {
    /* Background */
    --platform-bg:                  #f5f6f6;
    --platform-bg-gradient:          radial-gradient(circle at top left, color-mix(in srgb, var(--platform-primary) 35%, transparent), transparent 38%),
        linear-gradient(180deg, color-mix(in srgb, var(--platform-bg) 100%, transparent));
    --platform-bg-primary: color-mix(in srgb, var(--platform-primary, #7C2FBE) 15%, transparent);
    --platform-bg-transparent: color-mix(in srgb, var(--platform-bg, #000) 70%, transparent);

    /* Surface layers */
    --platform-surface:              #FFFFFF;
    --platform-surface-elevated:     #F1F5F9;
    --platform-surface-card:         color-mix(in srgb, var(--platform-surface) 92%, transparent);

    /* Text */
    --platform-text-primary:         #111827;
    --platform-text-on-primary:      var(--platform-text-primary)
    --platform-text-secondary:       #374151;
    --platform-text-on-secondary:    #FFFFFF;
    --platform-text-muted:           #6B7280;
    --platform-text-on-bg:           var(--platform-text-primary);
    --platform-text-link:            #2563EB;
    --platform-text-link-active:     #1D4ED8;
    --platform-text-link-visited:    #3730A3;

    /* Border */
    --platform-border:               #E5E7EB;

    /* Brand / Primary */
    --platform-primary:              #7C2FBE;
    --platform-primary-dark:         #6B28A7;
    --platform-primary-light:       #F3E8FF;
    --platform-secondary:            #9CA3AF;
    --platform-secondary-dark:       #6B7280;

     /* Semantic */

    /* Semantic */
    --platform-danger:               #EF4444;
    --platform-danger-light:         #FFEBEE;
    --platform-success:              #28a745;
    --platform-success-light:        #EBFFF1;
    --platform-success-dark:         #23923d;
    --platform-warning:              #F97342;
    --platform-warning-light:        #FFF4E5;

    /* Radius */
    --platform-radius-xs:            4px;
    --platform-radius-sm:            8px;
    --platform-radius-md:            12px;
    --platform-radius-lg:            16px;
    --platform-radius-xl:            24px;
    --platform-radius-xxl:           32px;

    /* Shadow */
    --platform-shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.08);
    --platform-shadow-md:            0 4px 12px rgba(0, 0, 0, 0.12);

    /* Font sizes */
    --platform-font-family:         'IRANSans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --platform-font-size-xs:         0.6rem;
    --platform-font-size-sm:         0.75rem;
    --platform-font-size-md:         0.875rem;
    --platform-font-size-lg:         1rem;
    --platform-font-size-xl:         1.25rem;
    --platform-font-size-xxl:        1.75rem;

    --platform-font-weight-light:     300;
    --platform-font-weight-regular:   400;
    --platform-font-weight-medium:    500;
    --platform-font-weight-bold:      700;

    /* Spacing */
    --platform-spacing-xs:           4px;
    --platform-spacing-sm:           8px;
    --platform-spacing-md:           16px;
    --platform-spacing-lg:           24px;
    --platform-spacing-xl:           36px;

    /* Safe area (mobile notch / home indicator) */
    --platform-safe-top:             env(safe-area-inset-top, 0px);
    --platform-safe-right:           env(safe-area-inset-right, 0px);
    --platform-safe-bottom:          env(safe-area-inset-bottom, 0px);
    --platform-safe-left:            env(safe-area-inset-left, 0px);

    /* Sidebar (icon-rail = 60px, expanded tier-2 default = 220px) */
    --platform-sidebar-width-collapsed: 60px;
    --platform-sidebar-width-expanded:  220px;
}

/* ─────────────────────────────────────────────
   Direction-aware font family

   RTL (Farsi/Arabic) keeps the bundled IRANSans face defined above.
   LTR (English) switches to the native system UI font stack — better
   suited to a Latin-script platform UI. Overriding the token (rather
   than font-family on a single element) means every consumer of
   var(--platform-font-family) follows the active direction.
   `dir` is set on <html>, an ancestor of .platform-layout.
   ───────────────────────────────────────────── */
[dir="ltr"] .platform-layout {
    --platform-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", 'IRANSans', Roboto, Helvetica, Arial, sans-serif;
}

/* ─────────────────────────────────────────────
   Responsive typographic base

   The --platform-font-size-* tokens are rem-based, so the document root
   font-size is the single dial that scales ALL panel typography together.
   Spacing, radius and layout tokens are px-based and intentionally do NOT
   scale with it. This stylesheet is loaded only through PlatformLayoutAsset
   (platform-layout pages), so legacy AdminLTE screens are unaffected.

   All widget CSS in the panel should size text with these tokens rather than
   hardcoded px values, so type stays consistent and responsive everywhere.
   ───────────────────────────────────────────── */
html {
    font-size: 100%;              /* 16px — phones & tablets (respects user preference) */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (max-width: 380px) {
    html { font-size: 93.75%; }   /* 15px — very small phones, avoids large-heading overflow */
}

@media (min-width: 1440px) {
    html { font-size: 106.25%; }  /* 17px — large desktops, more comfortable reading distance */
}

/* ─────────────────────────────────────────────
   Dark theme — explicit override
   ───────────────────────────────────────────── */
[data-theme="dark"] .platform-layout {
    --platform-bg:                   #0F172A;
    --platform-surface:              #1E293B;
    --platform-surface-elevated:     #243044;
    --platform-surface-card:         color-mix(in srgb, var(--platform-surface) 92%, transparent);

    --platform-text-primary:         #F1F5F9;
    --platform-text-secondary:       #CBD5E1;
    --platform-text-muted:           #94A3B8;
    --platform-text-link:            #60A5FA;
    --platform-text-link-active:     #93C5FD;
    --platform-text-link-visited:    #A5B4FC;

    --platform-border:               #334155;

    --platform-primary:              #ab4aba;
    --platform-primary-dark:         #ab4aba;
    --platform-primary-light:       #f4d4f4;
    --platform-text-on-primary:      var(--platform-text-primary);

    --platform-danger:               #F87171;
    --platform-success:              #28a745;
    --platform-success-dark:         #23923d;
    --platform-warning:              #FB923C;

    --platform-shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.30);
    --platform-shadow-md:            0 4px 12px rgba(0, 0, 0, 0.40);
}

/* ─────────────────────────────────────────────
   System dark mode (no explicit data-theme)
   ───────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :not([data-theme]) .platform-layout {
        --platform-bg:                   #0F172A;
        --platform-surface:              #1E293B;
        --platform-surface-elevated:     #243044;
        --platform-surface-card:         color-mix(in srgb, var(--platform-surface) 92%, transparent);

        --platform-text-primary:         #F1F5F9;
        --platform-text-secondary:       #CBD5E1;
        --platform-text-muted:           #94A3B8;
        --platform-text-link:            #60A5FA;
        --platform-text-link-active:     #93C5FD;
        --platform-text-link-visited:    #A5B4FC;

        --platform-border:               #334155;

        --platform-primary:              #ab4aba;
        --platform-primary-dark:         #ab4aba;
        --platform-primary-light:       #f4d4f4;
        --platform-text-on-primary:      var(--platform-text-primary)

        --platform-danger:               #F87171;
        --platform-success:              #28a745;
        --platform-success-dark:         #23923d;
        --platform-warning:              #FB923C;

        --platform-shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.30);
        --platform-shadow-md:            0 4px 12px rgba(0, 0, 0, 0.40);
    }
}