/* TK9-021A — Visual Identity Foundation
   Central design tokens for the ninth Shuqba Takreem event.
   Keep component/category-specific art in later TK9-021 patches. */
:root{
  --tk9-ink:#07110f;
  --tk9-ink-deep:#030807;
  --tk9-emerald:#103f35;
  --tk9-emerald-soft:#1a5a4b;
  --tk9-gold:#d9b66f;
  --tk9-gold-bright:#f0d596;
  --tk9-ivory:#f4efe3;
  --tk9-mist:#c9d5d0;
  --tk9-white:#fffdf8;
  --tk9-black:#000;
  --tk9-success:#8fd0a5;
  --tk9-danger:#d96d6d;

  --tk9-text-primary:var(--tk9-white);
  --tk9-text-secondary:#dce6e1;
  --tk9-text-muted:#aebdb7;
  --tk9-border-soft:rgba(244,239,227,.14);
  --tk9-border-gold:rgba(217,182,111,.48);
  --tk9-surface:rgba(255,255,255,.055);
  --tk9-surface-strong:rgba(255,255,255,.085);
  --tk9-glow-gold:rgba(217,182,111,.18);
  --tk9-shadow:0 28px 90px rgba(0,0,0,.42);

  --tk9-radius-sm:.85rem;
  --tk9-radius-md:1.4rem;
  --tk9-radius-lg:2.4rem;
  --tk9-radius-pill:999px;

  --tk9-space-1:.4rem;
  --tk9-space-2:.75rem;
  --tk9-space-3:1.15rem;
  --tk9-space-4:1.75rem;
  --tk9-space-5:2.6rem;

  --tk9-font-family:ShuqbaTakreem,"Segoe UI",Tahoma,sans-serif;
  --tk9-font-ui:"Segoe UI",Tahoma,sans-serif;
  --tk9-weight-regular:500;
  --tk9-weight-semibold:700;
  --tk9-weight-display:900;
  --tk9-leading-tight:1.08;
  --tk9-leading-body:1.55;

  --tk9-stage-background:
    radial-gradient(circle at 50% 18%,rgba(217,182,111,.13),transparent 31%),
    radial-gradient(circle at 14% 82%,rgba(26,90,75,.22),transparent 30%),
    linear-gradient(145deg,#10382f 0%,#091d18 54%,#040a08 100%);
  --tk9-stage-background-quiet:linear-gradient(145deg,#0d3028 0%,#071713 64%,#030806 100%);
  --tk9-pattern-opacity:.075;

  /* Reserved category token hooks; detailed themes land in TK9-021B. */
  --tk9-quran-accent:var(--tk9-gold);
  --tk9-university-accent:#83c5bd;
  --tk9-tawjihi-accent:#9eb8e9;
}

.tk9-pattern{
  position:relative;
  isolation:isolate;
}
.tk9-pattern::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:url('/assets/takreem9-pattern.svg');
  background-size:190px 190px;
  opacity:var(--tk9-pattern-opacity);
  mix-blend-mode:screen;
}

.tk9-brand-lockup{display:flex;align-items:center;gap:1rem;color:var(--tk9-text-primary)}
.tk9-brand-mark{width:82px;height:82px;flex:0 0 auto;filter:drop-shadow(0 12px 28px rgba(0,0,0,.28))}
.tk9-brand-copy{display:grid;gap:.2rem}
.tk9-brand-copy strong{font-family:var(--tk9-font-family);font-size:1.45rem;line-height:1.1;color:var(--tk9-ivory)}
.tk9-brand-copy span{font-size:.83rem;letter-spacing:.08em;color:var(--tk9-gold-bright)}

/* Admin identity specimen */
.identity-foundation-panel{overflow:hidden;background:linear-gradient(145deg,#0e2e27,#081a16 62%,#050d0b);color:var(--tk9-text-primary);border-color:var(--tk9-border-gold)!important}
.identity-foundation-panel .admin-kicker{color:var(--tk9-gold-bright)}
.identity-foundation-panel .admin-muted{color:var(--tk9-mist)}
.identity-foundation-grid{display:grid;grid-template-columns:minmax(250px,.82fr) minmax(0,1.3fr);gap:1.4rem;margin-top:1.15rem}
.identity-brand-specimen{position:relative;min-height:330px;border:1px solid var(--tk9-border-soft);border-radius:var(--tk9-radius-lg);padding:2rem;display:grid;align-content:space-between;overflow:hidden;background:radial-gradient(circle at 72% 18%,var(--tk9-glow-gold),transparent 34%),var(--tk9-stage-background-quiet)}
.identity-brand-specimen::after{content:"";position:absolute;inset:0;background:url('/assets/takreem9-pattern.svg') center/180px repeat;opacity:.08;pointer-events:none}
.identity-brand-specimen>*{position:relative;z-index:1}
.identity-brand-specimen .tk9-brand-mark{width:132px;height:132px}
.identity-brand-specimen h3{font-family:var(--tk9-font-family);font-size:clamp(2rem,3vw,3.25rem);line-height:1;margin:0;color:var(--tk9-ivory)}
.identity-brand-specimen p{margin:.45rem 0 0;color:var(--tk9-gold-bright);font-weight:700}
.identity-system-stack{display:grid;gap:1rem}
.identity-spec-card{border:1px solid var(--tk9-border-soft);border-radius:var(--tk9-radius-md);padding:1.1rem;background:rgba(255,255,255,.035)}
.identity-spec-card h3{margin:0 0 .85rem;font-size:1rem;color:var(--tk9-ivory)}
.identity-palette{display:grid;grid-template-columns:repeat(6,minmax(72px,1fr));gap:.55rem}
.identity-swatch{min-height:82px;border-radius:1rem;padding:.65rem;display:flex;align-items:flex-end;border:1px solid rgba(255,255,255,.15);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.identity-swatch span{font:700 11px/1.25 var(--tk9-font-ui);padding:.3rem .42rem;border-radius:.45rem;background:rgba(0,0,0,.42);color:#fff;direction:ltr}
.identity-type-samples{display:grid;gap:.7rem}
.identity-type-display{font-family:var(--tk9-font-family);font-size:clamp(2rem,3vw,3.8rem);font-weight:var(--tk9-weight-display);line-height:var(--tk9-leading-tight);color:var(--tk9-ivory)}
.identity-type-title{font-family:var(--tk9-font-family);font-size:1.7rem;font-weight:var(--tk9-weight-semibold);color:var(--tk9-gold-bright)}
.identity-type-body{font-family:var(--tk9-font-family);font-size:1rem;line-height:var(--tk9-leading-body);color:var(--tk9-text-secondary);max-width:62ch}
.identity-pattern-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem}
.identity-pattern-tile{height:92px;border:1px solid var(--tk9-border-soft);border-radius:1rem;background-color:#0a211c;background-image:url('/assets/takreem9-pattern.svg');background-size:128px 128px}
.identity-pattern-tile:nth-child(2){background-size:88px 88px;opacity:.82}
.identity-pattern-tile:nth-child(3){background-size:190px 190px;opacity:.65}
.identity-token-note{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;color:var(--tk9-mist);font-size:.9rem}
.identity-token-note code{direction:ltr;background:rgba(0,0,0,.28);border:1px solid var(--tk9-border-soft);padding:.25rem .45rem;border-radius:.5rem;color:var(--tk9-gold-bright)}
@media(max-width:1000px){.identity-foundation-grid{grid-template-columns:1fr}.identity-palette{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.identity-palette{grid-template-columns:repeat(2,1fr)}.identity-pattern-row{grid-template-columns:1fr}.identity-brand-specimen{min-height:280px}}