/*
 * PHASE-02 semantic design tokens. Values copied verbatim from
 * docs/DESIGN-SYSTEM.md's "Implementation token baseline" table —
 * do not hand-edit a hex here without updating that table too.
 * These are starting values; contrast is re-verified against real
 * backgrounds as pages are built, not proven by this file alone.
 */

:root {
  --surface-canvas: #f7f8f5;
  --surface-raised: #ffffff;
  --surface-overlay: #ffffff;
  --text-primary: #17231d;
  --text-secondary: #46544b;
  --border-default: #c9d5cb;
  --action-primary-bg: #176b3a;
  --action-primary-bg-hover: #125c31;
  --action-primary-text: #ffffff;
  --focus-ring: #1e75cf;
  --status-success: #1d6e3b;
  --status-warning: #855500;
  --status-error: #ad3030;
  --status-info: #165f9b;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-section: 64px;

  --radius-field: 8px;
  --radius-card: 12px;
  --radius-overlay: 16px;
  --radius-pill: 9999px;

  --motion-micro: 150ms;
  --motion-panel: 210ms;
  --motion-entrance: 280ms;
  --motion-easing: ease-out;
}

[data-theme="dark"] {
  --surface-canvas: #090d0c;
  --surface-raised: #151d1a;
  --surface-overlay: #1c2621;
  --text-primary: #f2f5f0;
  --text-secondary: #c3d0c6;
  --border-default: #425248;
  --action-primary-bg: #51d486;
  --action-primary-bg-hover: #3fc475;
  --action-primary-text: #082113;
  --focus-ring: #9bc9ff;
  --status-success: #62db8c;
  --status-warning: #ffd27a;
  --status-error: #ff8a8a;
  --status-info: #8ac9ff;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--surface-canvas);
  color: var(--text-primary);
}
html[lang="en"] body { font-family: var(--font-en), Arial, sans-serif; }
html[lang="bn"] body { font-family: var(--font-bn), sans-serif; line-height: 1.7; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  z-index: 100;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-raised);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-field);
  text-decoration: none;
}

.skip-link:focus {
  left: var(--space-md);
  top: var(--space-md);
}

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

.identity-panel {
  width: min(100%, 42rem);
  margin: var(--space-xl) auto;
  padding: var(--space-lg);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
}
.identity-form, .identity-form label, .identity-links { display: grid; gap: var(--space-md); }
.identity-form input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--space-sm);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-field);
  background: var(--surface-canvas);
  color: var(--text-primary);
}
.identity-form select {
  min-height: 44px;
  padding: var(--space-sm);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-field);
  background: var(--surface-canvas);
  color: var(--text-primary);
}
.identity-form button, .identity-panel button {
  min-height: 44px;
  padding: var(--space-sm) var(--space-md);
  border: 0;
  border-radius: var(--radius-field);
  background: var(--action-primary-bg);
  color: var(--action-primary-text);
  cursor: pointer;
}
.identity-links { margin-top: var(--space-lg); }
.identity-links a { color: var(--text-primary); }
.identity-record { padding: var(--space-sm); overflow-wrap: anywhere; }
.staff-shell { width: min(100%, 72rem); margin: 0 auto; }
.staff-nav { display: flex; flex-wrap: wrap; gap: var(--space-md); padding: var(--space-md); }
.staff-mobile-menu { display: none; }
@media (max-width: 600px) {
  .staff-desktop-nav { display: none; }
  .staff-mobile-menu { display: block; margin: var(--space-md); border: 1px solid var(--border-default); border-radius: var(--radius-field); background: var(--surface-raised); }
  .staff-mobile-menu summary { cursor: pointer; padding: var(--space-md); font-weight: 700; }
  .staff-mobile-menu summary:focus-visible { outline: 2px solid var(--action-primary-bg); outline-offset: 2px; }
  .staff-mobile-menu .staff-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-sm); padding-top: 0; }
  .staff-mobile-menu .staff-nav a { min-width: 0; overflow-wrap: anywhere; padding: var(--space-xs) 0; }
}
.staff-nav a { color: var(--text-primary); min-height: 44px; display: inline-flex; align-items: center; }

/* PHASE-04 staff CMS components. Semantic color tokens remain defined above. */
.cms-workspace { width: min(100%, 76rem); margin: 0 auto; padding: var(--space-md); }
.cms-heading { margin: var(--space-lg) 0 var(--space-xl); }
.cms-heading h1 { font-size: clamp(1.8rem, 4vw, 3rem); margin: var(--space-sm) 0; }
.cms-heading a { color: var(--text-primary); }
.cms-eyebrow { color: var(--text-secondary); max-width: 46rem; }
.cms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--space-lg); align-items: start; }
.cms-card, .cms-locale, .cms-section, .cms-preview { background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-card); padding: var(--space-lg); min-width: 0; }
.cms-card h2 { margin-top: 0; }
.cms-locale, .cms-section { display: grid; gap: var(--space-md); margin: var(--space-lg) 0; }
.cms-locale legend, .cms-section legend { font-weight: 700; padding: 0 var(--space-sm); }
.cms-field { display: grid; gap: var(--space-xs); margin: var(--space-md) 0; font-weight: 600; }
.cms-field input, .cms-field textarea, .cms-field select { display: block; width: 100%; min-height: 44px; border: 1px solid var(--border-default); border-radius: var(--radius-field); padding: var(--space-sm); background: var(--surface-canvas); color: var(--text-primary); font: inherit; }
.cms-field textarea { min-height: 7rem; resize: vertical; }
.cms-workspace button { min-height: 44px; border: 0; border-radius: var(--radius-field); padding: var(--space-sm) var(--space-md); background: var(--action-primary-bg); color: var(--action-primary-text); font: inherit; font-weight: 600; cursor: pointer; }
.cms-workspace button:hover { background: var(--action-primary-bg-hover); }
.cms-workspace button:disabled { opacity: .55; cursor: not-allowed; }
.cms-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-md) 0; }
.cms-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.cms-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding: var(--space-md); border: 1px solid var(--border-default); border-radius: var(--radius-field); overflow-wrap: anywhere; }
.cms-list a { color: var(--text-primary); font-weight: 700; }
.cms-list small { color: var(--text-secondary); }
.cms-badge { display: inline-block; border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: var(--space-xs) var(--space-sm); font-size: .85rem; }
.cms-message { border-left: 4px solid var(--status-info); padding: var(--space-md); background: var(--surface-raised); }
.cms-help { color: var(--text-secondary); line-height: 1.6; }
.cms-details { margin: var(--space-md) 0; }
.cms-details summary { cursor: pointer; font-weight: 700; padding: var(--space-sm) 0; }
.cms-details summary:focus-visible { outline: 2px solid var(--action-primary-bg); outline-offset: 2px; }
.cms-preview { margin-top: var(--space-lg); }
.cms-preview article { border-top: 1px solid var(--border-default); margin-top: var(--space-lg); padding-top: var(--space-lg); }
.cms-preview p { white-space: pre-wrap; }
@media (max-width: 480px) { .cms-workspace { padding: var(--space-sm); } .cms-card, .cms-locale, .cms-section { padding: var(--space-md); } }

/* PHASE-05 public core, using the approved semantic tokens. */
.site-brand { color: var(--text-primary); font-size: 1.18rem; font-weight: 800; text-decoration: none; }
.site-nav, .site-footer nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.site-nav a, .site-footer a { color: var(--text-primary); min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 4px; }
.site-footer { border-top: 1px solid var(--border-default); padding: var(--space-xl) var(--space-lg); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-lg); color: var(--text-secondary); }
.public-article, .public-empty, .public-contact-form { width: min(100%, 75rem); margin-inline: auto; }
.public-hero { position: relative; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-overlay); padding: clamp(2rem, 7vw, 6rem); background: var(--surface-raised); isolation: isolate; }
.public-hero::before { content: ""; position: absolute; inset: 0 0 auto auto; width: min(45%, 24rem); height: 100%; background: linear-gradient(140deg, transparent, var(--action-primary-bg)); opacity: .14; clip-path: polygon(48% 0, 100% 0, 100% 100%, 0 100%); z-index: -1; }
.public-hero::after { content: ""; position: absolute; right: 7%; top: 12%; width: 18%; aspect-ratio: 1; border: 2px solid var(--action-primary-bg); border-radius: 50%; opacity: .28; z-index: -1; }
.public-kicker { display: inline-flex; align-items: center; gap: .65rem; margin: 0 0 var(--space-lg); color: var(--text-secondary); font-size: .86rem; font-weight: 700; }
.public-kicker::before { content: ""; display: inline-block; width: 1.8rem; height: 2px; background: var(--action-primary-bg); }
.public-hero h1, .public-empty h1 { max-width: 18ch; margin: 0; font-size: clamp(2.2rem, 5vw, 4.5rem); line-height: 1.12; overflow-wrap: anywhere; }
.public-lead { max-width: 58ch; margin: var(--space-lg) 0 0; color: var(--text-secondary); font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.65; }
.public-sections { display: grid; gap: var(--space-lg); margin-top: var(--space-xl); }
.public-section { padding: clamp(1.3rem, 4vw, 3rem); background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-card); }
.public-section h2 { margin-top: 0; font-size: clamp(1.5rem, 2.5vw, 2.3rem); }
.public-section p { max-width: 70ch; white-space: pre-wrap; line-height: 1.7; color: var(--text-secondary); }
.public-section-cta { border-left: 4px solid var(--action-primary-bg); }
.public-article-team .public-sections { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.public-article-team .public-section-profile { border-top: 4px solid var(--action-primary-bg); }
.public-section .public-profile-role { color: var(--text-primary); font-weight: 700; }
.public-section .public-profile-relationship { color: var(--text-secondary); margin-block-start: 0; }
.public-profile-photo { display: block; width: 160px; max-width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-field); }
.public-profile-skills, .public-profile-links { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; padding: 0; margin: var(--space-sm) 0 0; }
.public-profile-skills li { border: 1px solid var(--border-default); border-radius: var(--radius-field); padding: var(--space-xs) var(--space-sm); overflow-wrap: anywhere; }
.public-profile-links a { color: var(--text-primary); font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 4px; overflow-wrap: anywhere; }
.public-button, .public-contact-form button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: var(--space-sm) var(--space-lg); border: 0; border-radius: var(--radius-field); color: var(--action-primary-text); background: var(--action-primary-bg); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.public-button:hover, .public-contact-form button:hover { background: var(--action-primary-bg-hover); }
.public-empty { min-height: 40vh; display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 5vw, 4rem); border: 1px solid var(--border-default); border-radius: var(--radius-overlay); background: var(--surface-raised); }
.public-empty p:last-child, .public-empty-note { color: var(--text-secondary); line-height: 1.6; }
.public-card-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--space-lg); margin: var(--space-xl) 0; padding: 0; }
.public-card { min-width: 0; padding: var(--space-lg); border: 1px solid var(--border-default); border-radius: var(--radius-card); background: var(--surface-raised); }
.public-card h2 { margin-top: 0; overflow-wrap: anywhere; }
.public-card p { color: var(--text-secondary); line-height: 1.6; }
.public-card a { color: var(--text-primary); font-weight: 700; text-underline-offset: 4px; }
.public-contact-form { display: grid; gap: var(--space-lg); max-width: 48rem; margin-block: var(--space-xl); padding: clamp(1.2rem, 4vw, 2rem); border: 1px solid var(--border-default); border-radius: var(--radius-card); background: var(--surface-raised); }
.public-contact-details { width: min(100%, 75rem); margin: var(--space-xl) auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--space-md); }
.public-contact-details > div { padding: var(--space-lg); border: 1px solid var(--border-default); border-radius: var(--radius-card); background: var(--surface-raised); overflow-wrap: anywhere; }
.public-contact-details h2 { margin: 0 0 var(--space-sm); font-size: 1.1rem; }
.public-contact-details a { display: block; color: var(--text-primary); line-height: 1.7; text-underline-offset: 4px; }
.public-contact-details address { font-style: normal; line-height: 1.7; }
.public-contact-form label:not(.public-consent) { display: grid; gap: var(--space-sm); font-weight: 600; }
.public-contact-form input:not([type="checkbox"]), .public-contact-form textarea { width: 100%; min-height: 48px; border: 1px solid var(--border-default); border-radius: var(--radius-field); background: var(--surface-canvas); color: var(--text-primary); padding: var(--space-sm) var(--space-md); font: inherit; }
.public-contact-form textarea { resize: vertical; }
.public-contact-form .public-consent { display: flex; gap: var(--space-sm); align-items: flex-start; line-height: 1.5; }
.public-contact-form .public-consent input { width: 1.2rem; height: 1.2rem; flex: none; }
.public-contact-form .public-consent a { color: var(--text-primary); }
.public-contact-form .public-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.public-contact-form button:disabled { opacity: .6; cursor: wait; }
@media (max-width: 640px) { .public-hero::after { display: none; } .site-footer { display: block; } }

.inquiry-message { display: block; white-space: pre-wrap; overflow-wrap: anywhere; margin-block: var(--space-xs); }
.inquiry-record { overflow-wrap: anywhere; }
.inquiry-redact { margin-block-start: var(--space-sm); }
.inquiry-redact summary { cursor: pointer; font-weight: 700; }
.site-logo { height: 32px; width: auto; max-width: 160px; vertical-align: middle; margin-inline-end: var(--space-sm); }
.public-section-image { display: block; max-width: 100%; height: auto; border-radius: var(--radius-field); margin-block-end: var(--space-sm); }