/* ==========================================================================
   ICFOSS Language AI — shared design system
   Vendor this file unchanged into every ICFOSS language app
   (speech studio, translate, ocr, nlptools) so they read as one product.
   App-specific rules belong in the app's own stylesheet, never in here.
   ========================================================================== */

:root{
  --orange:#F37920;
  --orange-dark:#D96512;
  --ink:#111111;
  --charcoal:#262626;
  --muted:#747474;
  --line:#E7E4DF;
  --paper:#F7F4EF;
  --white:#FFFFFF;
  --soft:#FFF1E7;

  --radius:22px;
  --radius-sm:14px;
  --shell:1280px;

  --font:Inter,"Noto Sans Malayalam",system-ui,sans-serif;
}

*{box-sizing:border-box}

html{background:var(--paper);overflow-x:clip}

body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
button{font:inherit}

.ds-shell{width:min(var(--shell),calc(100% - 48px));margin-inline:auto}

/* --- top bar -------------------------------------------------------------- */

.ds-topbar{
  position:sticky;
  top:0;
  z-index:100;
  height:72px;
  display:flex;
  align-items:center;
  backdrop-filter:blur(16px);
  background:rgba(247,244,239,.86);
  border-bottom:1px solid rgba(17,17,17,.08);
}

.ds-topbar-inner{
  width:min(var(--shell),calc(100% - 48px));
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.ds-brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.02em}

.ds-brand-mark{
  width:38px;height:38px;
  border-radius:50%;
  background:var(--orange);
  color:#fff;
  display:grid;place-items:center;
  font-size:15px;font-weight:800;
  flex:none;
}

.ds-brand small{display:block;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:0}

/* thin rule between the ICFOSS mark and the per-app product name */
.ds-brand-divider{
  width:1px;
  height:26px;
  background:var(--line);
  flex:none;
  margin-inline:2px;
}

.ds-brand-logo{height:34px;width:auto;flex:none}

/* cross-app nav — identical on every ICFOSS language app */
.ds-nav{display:flex;align-items:center;gap:26px;font-size:13px;font-weight:600;color:#3f3f3f}
.ds-nav a{position:relative;padding:6px 0;white-space:nowrap}
.ds-nav a::after{
  content:"";position:absolute;left:0;bottom:0;
  width:0;height:2px;background:var(--orange);
  transition:width .25s ease;
}
.ds-nav a:hover::after{width:100%}
.ds-nav a[aria-current="page"]{color:var(--ink)}
.ds-nav a[aria-current="page"]::after{width:100%}

/* --- typography ----------------------------------------------------------- */

.ds-kicker{
  color:var(--orange);
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:12px;
  font-weight:800;
  margin:0 0 24px;
}

.ds-display{
  margin:0;
  font-size:clamp(40px,6.5vw,86px);
  line-height:.92;
  letter-spacing:-.055em;
  font-weight:700;
}

.ds-h2{margin:0;font-size:clamp(28px,3.4vw,44px);line-height:1;letter-spacing:-.045em;font-weight:700}
.ds-h3{margin:0;font-size:clamp(20px,2vw,26px);letter-spacing:-.03em;font-weight:700}

.ds-lede{margin:0;color:var(--muted);line-height:1.75;font-size:16px;max-width:620px}

.ds-ml{font-family:"Noto Sans Malayalam",sans-serif}

/* --- buttons -------------------------------------------------------------- */

.ds-btn{
  border:1px solid var(--ink);
  border-radius:999px;
  min-height:46px;
  padding:0 20px;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .25s ease, background .25s ease, color .25s ease;
}
.ds-btn:hover{transform:translateY(-2px)}
.ds-btn-primary{background:var(--ink);color:#fff}
.ds-btn-accent{background:var(--orange);border-color:var(--orange);color:#fff}
.ds-btn-accent:hover{background:var(--orange-dark);border-color:var(--orange-dark)}
.ds-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* --- surfaces ------------------------------------------------------------- */

.ds-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
}

.ds-pill{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 14px;
  background:rgba(255,255,255,.65);
  font-size:12px;font-weight:700;
}

.ds-chip{
  display:inline-flex;align-items:center;
  border-radius:999px;
  padding:6px 12px;
  background:var(--soft);
  color:var(--orange-dark);
  font-size:11px;font-weight:800;
  letter-spacing:.04em;
}

.ds-dot{width:8px;height:8px;border-radius:50%;background:var(--orange);flex:none}

/* --- tabs ----------------------------------------------------------------- */

.ds-tabs{display:flex;gap:28px;border-bottom:1px solid var(--line)}

.ds-tab{
  position:relative;
  border:0;background:none;cursor:pointer;
  padding:14px 0;
  font-size:14px;font-weight:700;color:var(--muted);
  transition:color .25s ease;
}
.ds-tab::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;
  height:2px;background:var(--orange);
  transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
.ds-tab:hover{color:var(--ink)}
.ds-tab.active{color:var(--ink)}
.ds-tab.active::after{transform:scaleX(1)}

/* --- form controls -------------------------------------------------------- */

.ds-input,.ds-textarea,.ds-select{
  width:100%;
  font:inherit;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:14px 16px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.ds-input:focus,.ds-textarea:focus,.ds-select:focus{
  outline:none;
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(243,121,32,.16);
}
.ds-textarea{min-height:130px;resize:vertical;line-height:1.7}

/* --- ticker --------------------------------------------------------------- */

.ds-ticker{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  background:var(--white);
}
.ds-ticker-track{display:flex;width:max-content;padding:16px 0;animation:ds-marquee 26s linear infinite}
.ds-ticker-track span{font-size:13px;font-weight:700;margin-right:42px;white-space:nowrap}
.ds-ticker-track span::before{content:"●";color:var(--orange);margin-right:14px;font-size:9px;vertical-align:2px}
@keyframes ds-marquee{to{transform:translateX(-50%)}}

/* --- footer --------------------------------------------------------------- */

.ds-footer{
  border-top:1px solid var(--line);
  margin-top:90px;
  padding:44px 0;
  color:var(--muted);
  font-size:13px;
}
.ds-footer-inner{
  width:min(var(--shell),calc(100% - 48px));
  margin-inline:auto;
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.ds-footer a:hover{color:var(--ink)}

/* --- utility -------------------------------------------------------------- */

.ds-spinner{
  display:inline-block;
  width:13px;height:13px;
  margin-right:9px;
  vertical-align:-2px;
  border:2px solid rgba(243,121,32,.28);
  border-top-color:var(--orange);
  border-radius:50%;
  animation:ds-spin .7s linear infinite;
}
@keyframes ds-spin{to{transform:rotate(360deg)}}

@media (max-width:820px){
  .ds-shell,.ds-topbar-inner,.ds-footer-inner{width:min(100% - 32px,var(--shell))}
  .ds-nav{gap:16px;font-size:12px}
  .ds-brand small{display:none}
}

@media (max-width:560px){
  .ds-nav{display:none}
}

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