/*
  TamirSet Design System v1 — Stage 02
  Purpose: add a stable, low-risk CSS foundation for future frontend refactors.
  This file intentionally uses the ts-* token namespace and low-specificity selectors
  so existing production page CSS remains the source of truth until each page is migrated.
*/

@layer tamirset.tokens, tamirset.base, tamirset.layout, tamirset.components, tamirset.utilities;

@layer tamirset.tokens {
  :root {
    color-scheme: light;

    /* Brand palette */
    --ts-color-navy-950: #071726;
    --ts-color-navy-900: #0b2239;
    --ts-color-navy-800: #12324f;
    --ts-color-teal-700: #0e7c86;
    --ts-color-teal-600: #1097a2;
    --ts-color-green-700: #0e7f50;
    --ts-color-green-600: #16a36a;
    --ts-color-amber-500: #f6a623;
    --ts-color-red-600: #dc2626;
    --ts-color-white: #ffffff;
    --ts-color-ink: #1f2937;
    --ts-color-muted: #667085;
    --ts-color-subtle: #7a8a9a;
    --ts-color-line: #e6ecf2;
    --ts-color-line-strong: #cfdbe6;
    --ts-color-surface: #f6f9fc;
    --ts-color-surface-raised: #ffffff;
    --ts-color-teal-soft: #eaf7f8;
    --ts-color-green-soft: #eaf8f1;
    --ts-color-amber-soft: #fff5df;
    --ts-color-red-soft: #fff1f1;

    /* Semantic colors */
    --ts-bg: var(--ts-color-surface);
    --ts-surface: var(--ts-color-surface-raised);
    --ts-surface-soft: #f8fbfd;
    --ts-text: var(--ts-color-ink);
    --ts-text-strong: var(--ts-color-navy-900);
    --ts-text-muted: var(--ts-color-muted);
    --ts-border: var(--ts-color-line);
    --ts-primary: var(--ts-color-teal-700);
    --ts-primary-hover: #0b6d75;
    --ts-secondary: var(--ts-color-green-600);
    --ts-warning: var(--ts-color-amber-500);
    --ts-danger: var(--ts-color-red-600);
    --ts-success: var(--ts-color-green-700);
    --ts-focus-ring: 0 0 0 4px rgba(16, 151, 162, .18);

    /* Stage 03 semantic alias bridge
       Keeps all newer stage CSS files on one token source instead of falling back to
       different hard-coded colors in shell, commerce, forms, auth and panel layers. */
    --ts-color-primary-50: var(--ts-color-teal-soft);
    --ts-color-primary-100: #d9f0f2;
    --ts-color-primary-600: var(--ts-color-teal-600);
    --ts-color-primary-700: var(--ts-color-teal-700);
    --ts-color-primary-800: #0b6d75;
    --ts-color-primary: var(--ts-primary);
    --ts-color-secondary: var(--ts-secondary);
    --ts-color-success: var(--ts-success);
    --ts-color-success-600: var(--ts-color-green-600);
    --ts-color-warning: var(--ts-warning);
    --ts-color-warning-600: #d97706;
    --ts-color-danger: var(--ts-danger);
    --ts-color-danger-500: #ef4444;
    --ts-color-danger-600: var(--ts-danger);
    --ts-color-text: var(--ts-text);
    --ts-color-text-strong: var(--ts-text-strong);
    --ts-color-text-muted: var(--ts-text-muted);
    --ts-color-border: var(--ts-border);
    --ts-color-surface-muted: var(--ts-surface-soft);
    --ts-color-ring: rgba(16, 151, 162, .24);
    --ts-form-focus: var(--ts-color-primary-600);
    --ts-form-error: var(--ts-color-danger-600);
    --ts-form-success: var(--ts-color-success-600);
    --ts-form-warning: var(--ts-color-warning-600);

    /* Legacy tmset compatibility aliases.
       Production page bundles still define most --tmset-* values after this file;
       these aliases protect shared/stage CSS and future pages from missing-token drift. */
    --tmset-navy-950: var(--ts-color-navy-950);
    --tmset-navy-900: var(--ts-color-navy-900);
    --tmset-navy-800: var(--ts-color-navy-800);
    --tmset-teal-800: var(--ts-color-primary-800);
    --tmset-teal-700: var(--ts-color-teal-700);
    --tmset-teal-600: var(--ts-color-teal-600);
    --tmset-green-700: var(--ts-color-green-700);
    --tmset-green-600: var(--ts-color-green-600);
    --tmset-amber-500: var(--ts-color-amber-500);
    --tmset-white: var(--ts-color-white);
    --tmset-ink: var(--ts-color-ink);
    --tmset-muted: var(--ts-color-muted);
    --tmset-line: var(--ts-color-line);
    --tmset-surface: var(--ts-color-surface);
    --tmset-teal-soft: var(--ts-color-teal-soft);
    --tmset-green-soft: var(--ts-color-green-soft);
    --tmset-font-body: var(--ts-font-family);
    --tmset-font-heading: var(--ts-font-family);
    --tmset-font-number: var(--ts-font-family);
    --tmset-container: var(--ts-container);
    --tmset-container-safe-x: var(--ts-page-gutter);
    --tmset-section-y-gap: var(--ts-section-y);
    --tmset-section-y-gap-soft: var(--ts-section-y-sm);
    --tmset-radius-xl: var(--ts-radius-xl);
    --tmset-radius-lg: var(--ts-radius-lg);
    --tmset-radius-md: var(--ts-radius-md);
    --tm-radius-xl: var(--tmset-radius-xl);
    --tm-radius-lg: var(--tmset-radius-lg);
    --tm-radius-md: var(--tmset-radius-md);
    --tmset-shadow: var(--ts-shadow-md);
    --tmset-shadow-soft: var(--ts-shadow-sm);
    --tmset-shell-header-height: var(--ts-shell-header-height, var(--tmset-header-height, 76px));
    --tmset-z-service-mobile-nav: 7060;
    --tmset-mega-width: min(920px, calc(100vw - 48px));
    --tmset-mega-top: calc(var(--tmset-header-height, 118px) + 10px);
    --tmset-mega-left: 50vw;
    --tmset-mega-max-height: min(68vh, 620px);
    --tmset-mega-caret-right: 58px;
    --tmset-vh: 1vh;
    --tm-fridge-accent: var(--ts-color-primary-700);
    --tm-washer-content-bottom-space: 0px;

    /* Optional component-local defaults used by low-specificity utilities and dynamic widgets. */
    --ts-stack-gap: var(--ts-space-4);
    --ts-cluster-gap: var(--ts-space-3);
    --ts-grid-min: 240px;
    --ts-grid-gap: var(--ts-space-5);
    --ts-site-manager-seo-score: 0%;
    --ts-site-manager-editor-seo-score: 0%;
    --x: 50%;
    --y: 50%;

    /* Typography */
    --ts-font-family: "Vazirmatn", "IRANSansX", "IRANSans", "Segoe UI", Tahoma, Arial, sans-serif;
    --ts-font-size-xs: .75rem;
    --ts-font-size-sm: .875rem;
    --ts-font-size-md: 1rem;
    --ts-font-size-lg: 1.125rem;
    --ts-font-size-xl: 1.35rem;
    --ts-font-size-2xl: clamp(1.55rem, 1.1rem + 1.5vw, 2.25rem);
    --ts-font-size-3xl: clamp(2rem, 1.35rem + 2.4vw, 3.25rem);
    --ts-line-height-tight: 1.35;
    --ts-line-height-normal: 1.75;
    --ts-line-height-loose: 1.95;
    --ts-letter-spacing-tight: -.015em;

    /* Layout and spacing */
    --ts-container: 1288px;
    --ts-page-gutter: clamp(16px, 3vw, 32px);
    --ts-section-y: clamp(34px, 4.6vw, 64px);
    --ts-section-y-sm: clamp(24px, 3.5vw, 44px);
    --ts-space-0: 0;
    --ts-space-1: .25rem;
    --ts-space-2: .5rem;
    --ts-space-3: .75rem;
    --ts-space-4: 1rem;
    --ts-space-5: 1.25rem;
    --ts-space-6: 1.5rem;
    --ts-space-8: 2rem;
    --ts-space-10: 2.5rem;
    --ts-space-12: 3rem;
    --ts-space-16: 4rem;

    /* Radius, shadow, motion */
    --ts-radius-sm: 10px;
    --ts-radius-md: 16px;
    --ts-radius-lg: 20px;
    --ts-radius-xl: 28px;
    --ts-radius-pill: 999px;
    --ts-shadow-sm: 0 8px 22px rgba(11, 34, 57, .08);
    --ts-shadow-md: 0 14px 36px rgba(11, 34, 57, .10);
    --ts-shadow-lg: 0 22px 60px rgba(11, 34, 57, .14);
    --ts-ease-standard: cubic-bezier(.2, .8, .2, 1);
    --ts-duration-fast: 140ms;
    --ts-duration-normal: 220ms;

    /* Compatibility aliases for new code only. Existing legacy CSS keeps its own values. */
    --tmset-stage2-token-ready: 1;
  }
}

@layer tamirset.base {
  :where(html) {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  :where(body) {
    font-family: var(--ts-font-family);
    text-rendering: optimizeLegibility;
  }

  :where(img, svg, video, canvas) {
    max-inline-size: 100%;
  }

  :where(button, input, select, textarea) {
    font-family: inherit;
  }

  :where(a) {
    text-underline-offset: .22em;
  }

  :where(:focus-visible) {
    outline: none;
    box-shadow: var(--ts-focus-ring);
  }

  @media (prefers-reduced-motion: reduce) {
    :where(*, *::before, *::after) {
      scroll-behavior: auto !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
  }
}

@layer tamirset.layout {
  :where(.ts-container) {
    width: min(100% - (var(--ts-page-gutter) * 2), var(--ts-container));
    margin-inline: auto;
  }

  :where(.ts-section) {
    padding-block: var(--ts-section-y);
  }

  :where(.ts-section--compact) {
    padding-block: var(--ts-section-y-sm);
  }

  :where(.ts-stack) {
    display: flex;
    flex-direction: column;
    gap: var(--ts-stack-gap, var(--ts-space-4));
  }

  :where(.ts-cluster) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ts-cluster-gap, var(--ts-space-3));
  }

  :where(.ts-grid) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ts-grid-min, 240px)), 1fr));
    gap: var(--ts-grid-gap, var(--ts-space-5));
  }
}

@layer tamirset.components {
  :where(.ts-card) {
    background: var(--ts-surface);
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius-xl);
    box-shadow: var(--ts-shadow-sm);
  }

  :where(.ts-card__body) {
    padding: clamp(18px, 2.4vw, 28px);
  }

  :where(.ts-eyebrow) {
    display: inline-flex;
    align-items: center;
    gap: var(--ts-space-2);
    min-block-size: 32px;
    padding: 0 var(--ts-space-3);
    border-radius: var(--ts-radius-pill);
    background: var(--ts-color-teal-soft);
    color: var(--ts-primary);
    font-size: var(--ts-font-size-sm);
    font-weight: 800;
  }

  :where(.ts-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ts-space-2);
    min-block-size: 44px;
    padding: 0 var(--ts-space-5);
    border: 1px solid transparent;
    border-radius: var(--ts-radius-pill);
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--ts-duration-fast) var(--ts-ease-standard), box-shadow var(--ts-duration-fast) var(--ts-ease-standard), background-color var(--ts-duration-fast) var(--ts-ease-standard);
  }

  :where(.ts-btn:hover) {
    transform: translateY(-1px);
  }

  :where(.ts-btn--primary) {
    background: var(--ts-primary);
    color: var(--ts-color-white);
    box-shadow: 0 12px 26px rgba(14, 124, 134, .20);
  }

  :where(.ts-btn--primary:hover) {
    background: var(--ts-primary-hover);
  }

  :where(.ts-btn--ghost) {
    background: var(--ts-surface);
    color: var(--ts-text-strong);
    border-color: var(--ts-border);
  }

  :where(.ts-input) {
    width: 100%;
    min-block-size: 46px;
    padding: 0 var(--ts-space-4);
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius-md);
    background: var(--ts-surface);
    color: var(--ts-text);
  }

  :where(.ts-input:focus) {
    border-color: var(--ts-primary);
  }

  /* Stage 03 interoperability aliases for legacy component names.
     These selectors intentionally have zero specificity via :where(), so page CSS can override them. */
  :where(.tmset-card, .tmset-service-card, .tmset-product-card, .tmset-panel-card, .tmset-checkout-card, .tmset-admin-card, .tmset-customer-card) {
    background: var(--ts-surface);
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius-xl);
    box-shadow: var(--ts-shadow-sm);
  }

  :where(.tmset-btn, .tmset-button, .tmset-primary-btn, .tmset-commerce-primary-btn) {
    font-family: var(--ts-font-family);
    border-radius: var(--ts-radius-pill);
  }

  :where(.tmset-input, .tmset-field input, .tmset-field select, .tmset-field textarea) {
    font-family: var(--ts-font-family);
  }
}

@layer tamirset.utilities {
  :where(.ts-sr-only) {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  :where(.ts-text-muted) { color: var(--ts-text-muted); }
  :where(.ts-text-strong) { color: var(--ts-text-strong); }
  :where(.ts-bg-soft) { background: var(--ts-surface-soft); }
  :where(.ts-shadow-sm) { box-shadow: var(--ts-shadow-sm); }
  :where(.ts-shadow-md) { box-shadow: var(--ts-shadow-md); }
  :where(.ts-rounded-md) { border-radius: var(--ts-radius-md); }
  :where(.ts-rounded-lg) { border-radius: var(--ts-radius-lg); }
  :where(.ts-rounded-xl) { border-radius: var(--ts-radius-xl); }
  :where(.ts-hidden) { display: none !important; }
}