/**
 * Mohamed Saleh V2 — Canonical Component Tokens
 *
 * Semantic tokens for stable V2 components. Values live here so page CSS
 * may keep its current visual identity without becoming a second source
 * of truth. This file must load after tokens.css and before site-system.css.
 */

:root {
    /* Shell */
    --ms-shell-container: var(--ms-container-wide);
    --ms-shell-inline-space: 24px;
    --ms-shell-content-width: min(var(--ms-shell-container), calc(100% - (var(--ms-shell-inline-space) * 2)));
    --ms-shell-header-height: 82px;
    --ms-shell-header-shadow: 0 5px 18px rgba(var(--ms-rgb-heading), .035);

    /* Footer */
    --ms-footer-top: #1E2E43;
    --ms-footer-bottom: #1A283A;
    --ms-footer-bar: #142233;
    --ms-footer-text: #EAF1F8;
    --ms-footer-muted: #AEBBC9;
    --ms-footer-border: rgba(255, 255, 255, .10);

    /* Homepage */
    --ms-home-shadow: var(--ms-shadow-card);
    --ms-home-shadow-strong: var(--ms-shadow-card-strong);
    --ms-home-radius: var(--ms-radius-lg);
    --ms-home-card-radius: var(--ms-radius-card);
    --ms-home-card-padding: 26px 24px 22px;
    --ms-home-card-min-height: 316px;
    --ms-home-card-shadow: var(--ms-shadow-card-soft);
    --ms-home-container: var(--ms-shell-container);

    /* Marketing-page compatibility */
    --ms-marketing-shadow: var(--ms-shadow-card);
    --ms-marketing-shadow-hover: var(--ms-shadow-hover);
    --ms-marketing-light-eyebrow: #DDE9F7;
    --ms-marketing-warm-eyebrow: #F8C46F;

    /* Tool / calculator family */
    --ms-tool-container: var(--ms-shell-container);
    --ms-tool-shadow-sm: 0 10px 30px rgba(var(--ms-rgb-dark), .06);
    --ms-tool-shadow-md: var(--ms-shadow-tool-lg);
    --ms-tool-success: #198754;
    --ms-tool-success-soft: #EDF9F4;
    --ms-tool-danger: #C2413B;
    --ms-tool-danger-soft: #FFF1F1;
    --ms-tool-error-soft: #FFF1F0;

    /* Google Ads Guide approved feature theme.
       Centralized here to remove page-local theme duplication while
       intentionally preserving the current premium visual treatment. */
    --ms-guide-navy: #0A2442;
    --ms-guide-navy-2: #123F74;
    --ms-guide-navy-3: #07192E;
    --ms-guide-blue: #1478D4;
    --ms-guide-blue-2: #3B9DF4;
    --ms-guide-blue-3: #86C6FF;
    --ms-guide-orange: #FF8A12;
    --ms-guide-orange-2: #FFB04C;
    --ms-guide-orange-3: #FFD39A;
    --ms-guide-ink: #172033;
    --ms-guide-muted: #66758A;
    --ms-guide-line: #D5E4F0;
    --ms-guide-line-strong: #B9D2E6;
    --ms-guide-soft: #F7FAFC;
    --ms-guide-soft-blue: #EDF7FF;
    --ms-guide-soft-orange: #FFF5E8;
    --ms-guide-soft-green: #EEFAF5;
    --ms-guide-green: #187A55;
    --ms-guide-radius-sm: var(--ms-radius-card);
    --ms-guide-radius: var(--ms-radius-panel-lg);
    --ms-guide-radius-lg: var(--ms-radius-display);
    --ms-guide-shadow-sm: 0 10px 28px rgba(10, 36, 66, .055);
    --ms-guide-shadow: 0 20px 54px rgba(10, 36, 66, .095);
    --ms-guide-shadow-lg: 0 30px 82px rgba(10, 36, 66, .14);
    --ms-guide-glass-white: rgba(255, 255, 255, .70);
    --ms-guide-glass-white-strong: rgba(255, 255, 255, .84);
    --ms-guide-glass-blue: rgba(235, 247, 255, .72);
    --ms-guide-glass-orange: rgba(255, 246, 234, .74);
    --ms-guide-glass-border: rgba(255, 255, 255, .74);
    --ms-guide-blue-glow: rgba(20, 120, 212, .20);
    --ms-guide-orange-glow: rgba(255, 138, 18, .20);
}

/* === MIGRATED COMPONENT / FEATURE TOKEN ALIASES ===
 * Former page-local :root custom properties are centralized here.
 * Responsive token overrides retain their original media contexts.
 */

/* Source migration: mesaleh-v2/css/email-verification.css */
:root {
  --msv2-blue: var(--ms-color-blue);
  --msv2-blue-hover: var(--ms-color-blue-hover);
  --msv2-orange: var(--ms-color-orange);
  --msv2-orange-hover: var(--ms-color-orange-hover);
  --msv2-navy: var(--ms-color-navy);
  --msv2-heading: var(--ms-color-heading);
  --msv2-body: var(--ms-color-body);
  --msv2-muted: var(--ms-color-muted);
  --msv2-bg: var(--ms-color-bg);
  --msv2-surface: var(--ms-color-white);
  --msv2-soft-blue: var(--ms-color-soft-blue);
  --msv2-soft-orange: var(--ms-color-soft-orange);
  --msv2-border: var(--ms-color-border);
  --msv2-success: var(--ms-palette-1f8a5b);
  --msv2-success-soft: var(--ms-palette-ecf8f2);
  --msv2-error: var(--ms-palette-c64242);
  --msv2-error-soft: var(--ms-palette-fff0f0);
  --msv2-warning: var(--ms-palette-9a6400);
  --msv2-warning-soft: var(--ms-palette-fff8e8);
  --msv2-shadow: 0 20px 48px rgba(var(--ms-rgb-dark), 0.08);
}

/* Source migration: mesaleh-v2/css/pages/ads-calculator.css */
:root {
  --ms-ac-blue: var(--ms-color-blue);
  --ms-ac-blue-hover: var(--ms-color-blue-hover);
  --ms-ac-orange: var(--ms-color-orange);
  --ms-ac-orange-hover: var(--ms-color-orange-hover);
  --ms-ac-navy: var(--ms-color-navy);
  --ms-ac-dark: var(--ms-color-dark);
  --ms-ac-heading: var(--ms-color-heading);
  --ms-ac-body: var(--ms-color-body);
  --ms-ac-muted: var(--ms-color-muted);
  --ms-ac-border: var(--ms-color-border);
  --ms-ac-bg: var(--ms-color-bg);
  --ms-ac-white: var(--ms-color-white);
  --ms-ac-soft-blue: var(--ms-color-soft-blue);
  --ms-ac-soft-orange: var(--ms-color-soft-orange);
  --ms-ac-success: var(--ms-tool-success);
  --ms-ac-error: var(--ms-color-danger);
  --ms-ac-error-bg: var(--ms-tool-error-soft);
  --ms-ac-radius-sm: var(--ms-radius-sm);
  --ms-ac-radius-md: var(--ms-radius-md);
  --ms-ac-radius-lg: var(--ms-radius-lg);
  --ms-ac-shadow: var(--ms-shadow-tool);
}

/* Source migration: mesaleh-v2/css/pages/ads-calculator.css */
:root {
  --ms-ac-type-h1: clamp(46px, 4.2vw, 60px);
  --ms-ac-type-h2: clamp(32px, 3.1vw, 40px);
  --ms-ac-type-h3: 21px;
  --ms-ac-type-lead: clamp(18px, 1.5vw, 20px);
  --ms-ac-type-body: 17px;
  --ms-ac-type-small: 15px;
  --ms-ac-type-xs: 14px;
  --ms-ac-type-micro: 13px;
}

/* Source migration: mesaleh-v2/css/pages/ads-calculator.css */
@media (max-width: 760px) {
  :root {
    --ms-ac-type-h1: clamp(38px, 10vw, 46px);
    --ms-ac-type-h2: clamp(28px, 7.6vw, 34px);
    --ms-ac-type-h3: 20px;
    --ms-ac-type-lead: 17px;
    --ms-ac-type-body: 16px;
    --ms-ac-type-small: 14px;
    --ms-ac-type-xs: 13px;
    --ms-ac-type-micro: 12px;
  }
}

/* Source migration: mesaleh-v2/css/pages/digital-products-calculator.css */
:root {
  --ms-dpc-blue: var(--ms-color-blue);
  --ms-dpc-blue-hover: var(--ms-color-blue-hover);
  --ms-dpc-orange: var(--ms-color-orange);
  --ms-dpc-orange-hover: var(--ms-color-orange-hover);
  --ms-dpc-navy: var(--ms-color-navy);
  --ms-dpc-dark: var(--ms-color-dark);
  --ms-dpc-heading: var(--ms-color-heading);
  --ms-dpc-body: var(--ms-color-body);
  --ms-dpc-muted: var(--ms-color-muted);
  --ms-dpc-border: var(--ms-color-border);
  --ms-dpc-bg: var(--ms-color-bg);
  --ms-dpc-white: var(--ms-color-white);
  --ms-dpc-soft-blue: var(--ms-color-soft-blue);
  --ms-dpc-soft-orange: var(--ms-color-soft-orange);
  --ms-dpc-success: var(--ms-color-success);
  --ms-dpc-danger: var(--ms-tool-danger);
  --ms-dpc-shadow-sm: var(--ms-tool-shadow-sm);
  --ms-dpc-shadow-md: var(--ms-tool-shadow-md);
  --ms-dpc-container: var(--ms-tool-container);
}

/* Source migration: mesaleh-v2/css/pages/financial-goal-calculator.css */
:root {
  --ms-fgc-blue: var(--ms-color-blue);
  --ms-fgc-blue-hover: var(--ms-color-blue-hover);
  --ms-fgc-orange: var(--ms-color-orange);
  --ms-fgc-orange-hover: var(--ms-color-orange-hover);
  --ms-fgc-navy: var(--ms-color-navy);
  --ms-fgc-dark: var(--ms-color-dark);
  --ms-fgc-heading: var(--ms-color-heading);
  --ms-fgc-body: var(--ms-color-body);
  --ms-fgc-muted: var(--ms-color-muted);
  --ms-fgc-border: var(--ms-color-border);
  --ms-fgc-bg: var(--ms-color-bg);
  --ms-fgc-white: var(--ms-color-white);
  --ms-fgc-soft-blue: var(--ms-color-soft-blue);
  --ms-fgc-soft-orange: var(--ms-color-soft-orange);
  --ms-fgc-success: var(--ms-color-success);
  --ms-fgc-shadow-sm: var(--ms-tool-shadow-sm);
  --ms-fgc-shadow-md: var(--ms-tool-shadow-md);
  --ms-fgc-radius-sm: var(--ms-radius-10);
  --ms-fgc-radius-md: var(--ms-radius-card);
  --ms-fgc-radius-lg: var(--ms-radius-xl);
  --ms-fgc-container: var(--ms-tool-container);
}

/* Source migration: mesaleh-v2/css/pages/saas-subscription-calculator.css */
:root {
  --ms-ssc-blue: var(--ms-color-blue);
  --ms-ssc-blue-hover: var(--ms-color-blue-hover);
  --ms-ssc-orange: var(--ms-color-orange);
  --ms-ssc-orange-hover: var(--ms-color-orange-hover);
  --ms-ssc-navy: var(--ms-color-navy);
  --ms-ssc-dark: var(--ms-color-dark);
  --ms-ssc-heading: var(--ms-color-heading);
  --ms-ssc-body: var(--ms-color-body);
  --ms-ssc-muted: var(--ms-color-muted);
  --ms-ssc-border: var(--ms-color-border);
  --ms-ssc-bg: var(--ms-color-bg);
  --ms-ssc-white: var(--ms-color-white);
  --ms-ssc-soft-blue: var(--ms-color-soft-blue);
  --ms-ssc-soft-orange: var(--ms-color-soft-orange);
  --ms-ssc-success: var(--ms-color-success);
  --ms-ssc-danger: var(--ms-tool-danger);
  --ms-ssc-shadow-sm: var(--ms-tool-shadow-sm);
  --ms-ssc-shadow-md: var(--ms-tool-shadow-md);
  --ms-ssc-container: var(--ms-tool-container);
}

/* Source migration: mesaleh-v2/css/pages/time-trap-calculator.css */
:root {
  --ms-ttc-blue: var(--ms-color-blue);
  --ms-ttc-blue-hover: var(--ms-color-blue-hover);
  --ms-ttc-orange: var(--ms-color-orange);
  --ms-ttc-orange-hover: var(--ms-color-orange-hover);
  --ms-ttc-navy: var(--ms-color-navy);
  --ms-ttc-dark: var(--ms-color-dark);
  --ms-ttc-heading: var(--ms-color-heading);
  --ms-ttc-body: var(--ms-color-body);
  --ms-ttc-muted: var(--ms-color-muted);
  --ms-ttc-border: var(--ms-color-border);
  --ms-ttc-bg: var(--ms-color-bg);
  --ms-ttc-white: var(--ms-color-white);
  --ms-ttc-soft-blue: var(--ms-color-soft-blue);
  --ms-ttc-soft-orange: var(--ms-color-soft-orange);
  --ms-ttc-success: var(--ms-color-success);
  --ms-ttc-danger: var(--ms-tool-danger);
  --ms-ttc-shadow-sm: var(--ms-tool-shadow-sm);
  --ms-ttc-shadow-md: var(--ms-tool-shadow-md);
  --ms-ttc-container: var(--ms-tool-container);
}

/* Source migration: mesaleh-v2/css/pages/training.css */
:root {
  --mst-blue: var(--ms-color-blue);
  --mst-blue-hover: var(--ms-color-blue-hover);
  --mst-orange: var(--ms-color-orange);
  --mst-orange-hover: var(--ms-color-orange-hover);
  --mst-navy: var(--ms-color-navy);
  --mst-dark: var(--ms-color-dark);
  --mst-heading: var(--ms-color-heading);
  --mst-body: var(--ms-color-body);
  --mst-muted: var(--ms-color-muted);
  --mst-muted-readable: var(--ms-color-muted-readable);
  --mst-orange-text: var(--ms-color-warning-text);
  --mst-border: var(--ms-color-border);
  --mst-bg: var(--ms-color-bg);
  --mst-white: var(--ms-color-surface);
  --mst-soft-blue: var(--ms-color-soft-blue);
  --mst-soft-orange: var(--ms-color-soft-orange);
  --mst-radius-sm: var(--ms-radius-sm);
  --mst-radius-md: var(--ms-radius-md);
  --mst-radius-lg: var(--ms-radius-lg);
  --mst-shadow: var(--ms-marketing-shadow);
}

/* Source migration: mesaleh-v2/css/public/components.css */
:root {
  --ms-v2-page-max: var(--ms-shell-container);
  --ms-v2-page-gutter: 48px;
}

/* Canonical responsive shell gutters: header, footer and page containers share the same guides. */
@media (max-width: 921px) {
  :root {
    --ms-shell-inline-space: 20px;
    --ms-v2-page-gutter: 40px;
  }
}

@media (max-width: 600px) {
  :root {
    --ms-shell-inline-space: 14px;
    --ms-v2-page-gutter: 28px;
  }
}

/* === SPECIALIZED COMPONENT SEMANTICS === */
:root {
  /* Services typography — current approved scale */
  --ms-services-type-h1: clamp(2rem, 2.55vw, 2.55rem);
  --ms-services-type-h2: clamp(1.42rem, 1.75vw, 1.82rem);
  --ms-services-type-h3: 1.05rem;
  --ms-services-type-lead: 1rem;
  --ms-services-type-body: .9375rem;
  --ms-services-type-small: .8125rem;
  --ms-services-type-micro: .6875rem;
  --ms-services-weight-heading: var(--ms-font-weight-700);
  --ms-services-weight-strong: var(--ms-font-weight-600);
  --ms-services-weight-body: var(--ms-font-weight-400);
  --ms-services-weight-accent: var(--ms-font-weight-700);

  /* Lesson/LMS shell dimensions */
  --ms-lesson-admin-offset-desktop: var(--ms-space-8);
  --ms-lesson-admin-offset-mobile: 46px;
  --ms-lesson-header-height-mobile: 76px;
  --ms-lesson-toolbar-height-default: var(--ms-space-16);
  --ms-lesson-sidebar-width-default: 348px;
  --ms-lesson-sidebar-width-wide: 360px;
  --ms-lesson-sidebar-width-compact: 316px;
  --ms-lesson-shell-width-default: 1440px;
  --ms-lesson-shell-width-focus: 1580px;

  /* Portfolio website-preview viewport */
  --ms-portfolio-preview-height: 238px;
  --ms-portfolio-preview-height-mobile: 205px;

  /* Single-post card behavior */
  --ms-post-card-motion: border-color var(--ms-motion-normal), box-shadow var(--ms-motion-normal), transform var(--ms-motion-normal);
}