/* =========================================================
   Tamakkin Global Design System — Phase 1 Foundation
   Conservative production patch: tokens, theme, accessibility
   ========================================================= */
:root,
html[data-theme="light"],
body:not(.dark){
  color-scheme: light;
  --tk-bg:#F7F8F4;
  --tk-bg-soft:#EEF8F1;
  --tk-surface:#FFFFFF;
  --tk-surface-2:#F4F7F2;
  --tk-card:#FFFFFF;
  --tk-elevated:#FFFFFF;
  --tk-heading:#0E211A;
  --tk-text:#18231E;
  --tk-muted:#5A675F;
  --tk-subtle:#768178;
  --tk-border:rgba(15, 53, 42, .12);
  --tk-border-strong:rgba(15, 123, 95, .22);
  --tk-primary:#0F7B5F;
  --tk-primary-hover:#0A6048;
  --tk-primary-soft:#E8F6EF;
  --tk-primary-weak:#F2FAF6;
  --tk-blue:#1A5FA5;
  --tk-blue-soft:#E8F1FB;
  --tk-amber:#A86210;
  --tk-amber-soft:#FDF3E0;
  --tk-danger:#B91C1C;
  --tk-danger-soft:#FEE2E2;
  --tk-success:#15803D;
  --tk-success-soft:#DCFCE7;
  --tk-input-bg:#FFFFFF;
  --tk-input-text:#18231E;
  --tk-placeholder:#66736B;
  --tk-focus:0 0 0 4px rgba(15,123,95,.16);
  --tk-shadow-sm:0 8px 20px rgba(15,23,42,.06);
  --tk-shadow-md:0 16px 42px rgba(15,23,42,.09);
  --tk-shadow-lg:0 24px 70px rgba(15,23,42,.12);
  --tk-radius-sm:10px;
  --tk-radius-md:16px;
  --tk-radius-lg:22px;
  --tk-radius-xl:30px;
  --tk-nav-bg:rgba(255,255,255,.92);
  --tk-hero:linear-gradient(135deg,#FFFFFF 0%,#F0FAF5 58%,#EAF7F0 100%);
}
html.dark,
body.dark,
html[data-theme="dark"]{
  color-scheme: dark;
  --tk-bg:#071A16;
  --tk-bg-soft:#0A211B;
  --tk-surface:#0E231E;
  --tk-surface-2:#122C25;
  --tk-card:#102820;
  --tk-elevated:#142F28;
  --tk-heading:#F8FAFC;
  --tk-text:#EEF5F1;
  --tk-muted:#B6C7BF;
  --tk-subtle:#94A59D;
  --tk-border:rgba(226,244,236,.12);
  --tk-border-strong:rgba(134,239,172,.24);
  --tk-primary:#86EFAC;
  --tk-primary-hover:#4ADE80;
  --tk-primary-soft:rgba(134,239,172,.12);
  --tk-primary-weak:rgba(134,239,172,.07);
  --tk-blue:#93C5FD;
  --tk-blue-soft:rgba(147,197,253,.14);
  --tk-amber:#FCD34D;
  --tk-amber-soft:rgba(252,211,77,.13);
  --tk-danger:#FCA5A5;
  --tk-danger-soft:rgba(252,165,165,.13);
  --tk-success:#86EFAC;
  --tk-success-soft:rgba(134,239,172,.13);
  --tk-input-bg:#0B1F1A;
  --tk-input-text:#F8FAFC;
  --tk-placeholder:#A8BBB2;
  --tk-focus:0 0 0 4px rgba(134,239,172,.20);
  --tk-shadow-sm:0 8px 24px rgba(0,0,0,.28);
  --tk-shadow-md:0 18px 48px rgba(0,0,0,.34);
  --tk-shadow-lg:0 30px 80px rgba(0,0,0,.42);
  --tk-nav-bg:rgba(7,26,22,.88);
  --tk-hero:linear-gradient(135deg,#0E231E 0%,#071A16 58%,#102820 100%);
}

html{background:var(--tk-bg)!important;scroll-behavior:smooth;}
body{background:var(--tk-bg)!important;color:var(--tk-text)!important;transition:background .18s ease,color .18s ease;}
body,button,input,select,textarea{font-family:'Tajawal',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;}
*,*::before,*::after{box-sizing:border-box;}
:focus-visible{outline:3px solid color-mix(in srgb,var(--tk-primary) 65%,transparent);outline-offset:3px;}

/* Global typography and surfaces */
h1,h2,h3,h4,h5,h6,.section-title,.pd-title,.td-hero h1{color:var(--tk-heading)!important;}
p,.lead,.section-desc,.muted,.desc,.pc-desc,.quick-desc,.meta,.subtitle{color:var(--tk-muted)!important;}
.card,.panel,.quick-card,.path-card,.grade-card,.skill,.indicator-card,.type-card,.learning-card,.activity-card,.dashboard-group,.pd-bc,.pd-modal,.td-panel,.td-card,.auth-card,.form-card{
  background:var(--tk-card)!important;color:var(--tk-text)!important;border-color:var(--tk-border)!important;box-shadow:var(--tk-shadow-sm);
}
.container{max-width:min(1160px,calc(100vw - 32px));}

/* Inputs and forms: no invisible light/dark text */
input,select,textarea,.form-input,.form-select,.form-textarea{
  width:100%;max-width:100%;background:var(--tk-input-bg)!important;color:var(--tk-input-text)!important;border:1.5px solid var(--tk-border)!important;border-radius:14px!important;box-shadow:none!important;
}
input::placeholder,textarea::placeholder{color:var(--tk-placeholder)!important;opacity:1!important;}
input:focus,select:focus,textarea:focus,.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--tk-primary)!important;box-shadow:var(--tk-focus)!important;outline:none!important;}
label,.form-label{color:var(--tk-heading)!important;font-weight:800;}

/* Navbar/App shell consistency */
.navbar,.topnav,.dashboard-site-nav{background:var(--tk-nav-bg)!important;backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid var(--tk-border)!important;box-shadow:0 8px 26px rgba(15,23,42,.06)!important;}
.nav-links a,.nav-drawer a,.btn-nav-ghost,.dashboard-site-nav a{color:var(--tk-muted)!important;}
.nav-links a:hover,.nav-drawer a:hover,.btn-nav-ghost:hover,.dashboard-site-nav a:hover{color:var(--tk-primary)!important;background:var(--tk-primary-soft)!important;}
.btn-theme,#themeToggle,.theme-switch,.tk-theme-toggle{width:42px!important;height:42px!important;min-width:42px!important;padding:0!important;border-radius:999px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;background:var(--tk-surface)!important;color:var(--tk-heading)!important;border:1px solid var(--tk-border)!important;box-shadow:var(--tk-shadow-sm);font-size:18px!important;line-height:1!important;overflow:hidden;text-indent:0!important;}
.btn-theme:hover,#themeToggle:hover,.theme-switch:hover,.tk-theme-toggle:hover{background:var(--tk-primary-soft)!important;color:var(--tk-primary)!important;}
.btn-theme .label,#themeToggle .label,.theme-switch .label{display:none!important;}

/* Buttons */
.btn-primary,.btn-nav-primary,.submit-btn,.nav-drawer-cta,.pc-btn,.support-button,.pd-primary,.td-primary,.auth-submit{
  background:var(--tk-primary)!important;color:var(--tk-bg)!important;border-color:transparent!important;box-shadow:0 12px 28px color-mix(in srgb,var(--tk-primary) 28%, transparent)!important;border-radius:14px!important;font-weight:900!important;
}
.btn-primary:hover,.btn-nav-primary:hover,.submit-btn:hover,.pc-btn:hover,.support-button:hover,.pd-primary:hover,.td-primary:hover,.auth-submit:hover{background:var(--tk-primary-hover)!important;transform:translateY(-1px);}
.btn-secondary,.back,.toplink,.ghost-btn,.auth-back{background:var(--tk-surface)!important;color:var(--tk-primary)!important;border:1px solid var(--tk-border)!important;border-radius:14px!important;box-shadow:var(--tk-shadow-sm);}

/* Hero/sections must follow real light/dark */
.hero,.td-hero,.pd-hero,.auth-hero{background:var(--tk-hero)!important;color:var(--tk-text)!important;}
.quick-start-section,.about-section,.learning-section,.faq-section,.paths-section,.indicators-section,.ask-section{background:var(--tk-bg)!important;}
.quick-card.quick-primary,.hero-badge,.badge,.source-badge,.pill,.tab.active{background:var(--tk-primary-soft)!important;color:var(--tk-primary)!important;border-color:var(--tk-border-strong)!important;}
.tab{background:var(--tk-surface)!important;color:var(--tk-text)!important;border-color:var(--tk-border)!important;}
.tab.active{box-shadow:var(--tk-shadow-sm);}

/* Prevent oversize icons/cards from breaking mobile */
.quick-icon,.pc-icon,.icon,.card-icon,.td-icon,.pd-icon{display:inline-flex;align-items:center;justify-content:center;max-width:54px;max-height:54px;font-size:clamp(20px,4vw,30px)!important;line-height:1;}
.quick-title,.pc-title,.title{font-size:clamp(15px,2.2vw,19px)!important;line-height:1.35;}
.quick-desc,.pc-desc,.desc{font-size:clamp(12.5px,1.7vw,14.5px)!important;line-height:1.75;}

/* Public back links should be visible as controls */
.back,.toplink,.auth-back{display:inline-flex!important;align-items:center;gap:8px;text-decoration:none!important;font-weight:900!important;padding:10px 16px!important;}

/* Hide production-hostile/dev-only visible notices */
.dev-note,.debug-note,.source-badge[data-dev="true"],.production-hidden{display:none!important;}

/* Mobile safeguards */
@media(max-width:760px){
  .container{max-width:100%;padding-left:16px!important;padding-right:16px!important;}
  h1{font-size:clamp(26px,9vw,38px)!important;}
  .hero{padding-top:calc(var(--nav-h,60px) + 22px)!important;padding-bottom:28px!important;}
  .quick-start-grid,.path-cards,.grade-grid,.grid{grid-template-columns:1fr!important;}
  .card,.quick-card,.path-card,.grade-card,.panel{border-radius:20px!important;}
  .nav-links{display:none;}
  .nav-mobile-toggle{display:inline-flex!important;}
}

/* Phase 3 — Homepage Architecture: focused assessment + primary path system */
.assessment-focus-section{
  padding-block:clamp(32px,5vw,72px);
}
.assessment-focus-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,4vw,42px);
  align-items:center;
  background:linear-gradient(135deg,var(--surface,rgba(255,255,255,.92)),rgba(34,197,94,.08));
  border:1px solid var(--border,rgba(15,23,42,.12));
  box-shadow:var(--shadow-lg,0 24px 60px rgba(15,23,42,.10));
}
.assessment-focus-card .section-title{
  margin-block:8px 12px;
  line-height:1.25;
}
.assessment-focus-points{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.assessment-focus-points span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:38px;
  padding:8px 12px;
  border-radius:999px;
  background:var(--surface-2,rgba(34,197,94,.08));
  border:1px solid var(--border,rgba(15,23,42,.10));
  color:var(--text,inherit);
  font-weight:800;
  font-size:.92rem;
}
.assessment-focus-action{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:min(260px,100%);
}
.assessment-primary-btn,.assessment-secondary-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 18px;
  border-radius:16px;
  text-decoration:none;
  font-weight:900;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.assessment-primary-btn{
  color:#fff!important;
  background:linear-gradient(135deg,#0f7b5f,#16a34a);
  box-shadow:0 14px 30px rgba(15,123,95,.24);
}
.assessment-secondary-btn{
  color:var(--text,#0f172a)!important;
  background:var(--surface,rgba(255,255,255,.88));
  border:1px solid var(--border,rgba(15,23,42,.12));
}
.assessment-primary-btn:hover,.assessment-secondary-btn:hover{
  transform:translateY(-2px);
}
.homepage-primary-paths{
  padding-top:clamp(36px,6vw,82px);
}
.homepage-primary-paths .path-cards{
  margin-top:clamp(20px,4vw,34px);
}
@media (max-width: 820px){
  .assessment-focus-card{
    grid-template-columns:1fr;
  }
  .assessment-focus-action{
    width:100%;
  }
}
[data-theme="dark"] .assessment-focus-card, body.dark .assessment-focus-card{
  background:linear-gradient(135deg,var(--surface,#101827),rgba(34,197,94,.10));
}


/* iOS Safari AI Assistant Zoom Fix */
.ai-assistant input,
.ai-assistant textarea,
.ai-chat-input,
.ai-assistant-panel textarea,
.ai-widget-panel textarea {
  font-size: 16px !important;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .ai-assistant-panel,
  .ai-chat-panel,
  .ai-widget-panel {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    left: 12px !important;
    right: auto !important;
    transform: none !important;
    overflow-x: hidden !important;
  }

  .ai-assistant-panel * {
    max-width: 100%;
    box-sizing: border-box;
  }
}