/* =========================================================================
   Core Directory - Utility classes (Tailwind-style, hand-compiled)
   Only the utilities the theme templates use. No build step required.
   Design tokens up top so the whole network can be re-skinned fast.
   ========================================================================= */

:root {
  /* Brand / surface */
  --ce-bg:        #ffffff;
  --ce-ink:       #111827; /* near-black body text */
  --ce-ink-soft:  #4b5563; /* secondary text */
  --ce-ink-mute:  #9ca3af; /* meta / muted */
  --ce-line:      #e5e7eb; /* card + divider borders */
  --ce-line-2:    #d1d5db; /* slightly stronger border */
  --ce-surface:   #f9fafb; /* subtle panel bg */

  /* Dark header (FileCR-style contrast) */
  --ce-header-bg:  #0f1115;
  --ce-header-ink: #f3f4f6;
  --ce-header-mute:#9aa3b2;
  --ce-header-line:#23262d;

  /* Accent (download / primary actions) */
  --ce-accent:     #16a34a; /* green = download/go */
  --ce-accent-ink: #ffffff;
  --ce-accent-d:   #15803d;
  --ce-star:       #f59e0b; /* rating gold */
  --ce-crown:      #d4af37; /* premium crown */

  /* Layout */
  --ce-container: 1280px;
  --ce-radius:    10px;
  --ce-radius-lg: 16px;
  --ce-shadow:    0 1px 2px rgba(0,0,0,.05);
  --ce-shadow-md: 0 4px 14px rgba(0,0,0,.08);
}

/* ---------- Layout / container ---------- */
.ce-container { width: 100%; max-width: var(--ce-container); margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }

/* ---------- Display ---------- */
.ce-block   { display: block; }
.ce-inline  { display: inline; }
.ce-iblock  { display: inline-block; }
.ce-flex    { display: flex; }
.ce-iflex   { display: inline-flex; }
.ce-grid    { display: grid; }
.ce-hidden  { display: none; }

/* ---------- Flex helpers ---------- */
.ce-items-center   { align-items: center; }
.ce-items-start    { align-items: flex-start; }
.ce-items-stretch  { align-items: stretch; }
.ce-justify-between{ justify-content: space-between; }
.ce-justify-center { justify-content: center; }
.ce-justify-end    { justify-content: flex-end; }
.ce-flex-col       { flex-direction: column; }
.ce-flex-wrap      { flex-wrap: wrap; }
.ce-flex-1         { flex: 1 1 0%; }
.ce-shrink-0       { flex-shrink: 0; }
.ce-grow          { flex-grow: 1; }

/* ---------- Grid ---------- */
.ce-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.ce-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.ce-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
/* main + sidebar split (used on home & single) */
.ce-grid-main { grid-template-columns: minmax(0,1fr) 320px; }
.ce-grid-arch { grid-template-columns: 280px minmax(0,1fr); }

/* ---------- Gap ---------- */
.ce-gap-1 { gap: 4px; }
.ce-gap-2 { gap: 8px; }
.ce-gap-3 { gap: 12px; }
.ce-gap-4 { gap: 16px; }
.ce-gap-5 { gap: 20px; }
.ce-gap-6 { gap: 24px; }
.ce-gap-8 { gap: 32px; }

/* ---------- Spacing: margin ---------- */
.ce-m-0  { margin: 0; }
.ce-mt-1 { margin-top: 4px; }  .ce-mt-2 { margin-top: 8px; }  .ce-mt-3 { margin-top: 12px; }
.ce-mt-4 { margin-top: 16px; } .ce-mt-6 { margin-top: 24px; } .ce-mt-8 { margin-top: 32px; }
.ce-mb-1 { margin-bottom: 4px; } .ce-mb-2 { margin-bottom: 8px; } .ce-mb-3 { margin-bottom: 12px; }
.ce-mb-4 { margin-bottom: 16px; } .ce-mb-6 { margin-bottom: 24px; } .ce-mb-8 { margin-bottom: 32px; }
.ce-mx-auto { margin-left:auto; margin-right:auto; }

/* ---------- Spacing: padding ---------- */
.ce-p-0 { padding: 0; }
.ce-p-2 { padding: 8px; }  .ce-p-3 { padding: 12px; } .ce-p-4 { padding: 16px; }
.ce-p-5 { padding: 20px; } .ce-p-6 { padding: 24px; }
.ce-px-2 { padding-left:8px; padding-right:8px; }
.ce-px-3 { padding-left:12px; padding-right:12px; }
.ce-px-4 { padding-left:16px; padding-right:16px; }
.ce-px-5 { padding-left:20px; padding-right:20px; }
.ce-py-1 { padding-top:4px; padding-bottom:4px; }
.ce-py-2 { padding-top:8px; padding-bottom:8px; }
.ce-py-3 { padding-top:12px; padding-bottom:12px; }
.ce-py-4 { padding-top:16px; padding-bottom:16px; }
.ce-py-6 { padding-top:24px; padding-bottom:24px; }
.ce-py-8 { padding-top:32px; padding-bottom:32px; }

/* ---------- Sizing ---------- */
.ce-w-full { width: 100%; }
.ce-h-full { height: 100%; }
.ce-w-icon { width: 56px; height: 56px; }
.ce-w-thumb{ width: 44px; height: 44px; }

/* ---------- Typography ---------- */
.ce-text-xs   { font-size: 12px; line-height: 1.4; }
.ce-text-sm   { font-size: 13px; line-height: 1.45; }
.ce-text-base { font-size: 15px; line-height: 1.5; }
.ce-text-lg   { font-size: 18px; line-height: 1.4; }
.ce-text-xl   { font-size: 22px; line-height: 1.3; }
.ce-text-2xl  { font-size: 28px; line-height: 1.25; }
.ce-text-3xl  { font-size: 34px; line-height: 1.2; }
.ce-font-normal { font-weight: 400; }
.ce-font-medium { font-weight: 500; }
.ce-font-semibold { font-weight: 600; }
.ce-font-bold   { font-weight: 700; }
.ce-uppercase   { text-transform: uppercase; letter-spacing: .02em; }
.ce-truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce-leading-tight { line-height: 1.25; }
.ce-text-center { text-align: center; }
.ce-text-right  { text-align: right; }

/* Clamp helpers for descriptions */
.ce-clamp-1, .ce-clamp-2 { display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
.ce-clamp-1 { -webkit-line-clamp: 1; }
.ce-clamp-2 { -webkit-line-clamp: 2; }

/* ---------- Colors ---------- */
.ce-ink       { color: var(--ce-ink); }
.ce-ink-soft  { color: var(--ce-ink-soft); }
.ce-ink-mute  { color: var(--ce-ink-mute); }
.ce-on-dark   { color: var(--ce-header-ink); }
.ce-on-dark-mute { color: var(--ce-header-mute); }
.ce-bg-white  { background: var(--ce-bg); }
.ce-bg-surface{ background: var(--ce-surface); }
.ce-bg-dark   { background: var(--ce-header-bg); }

/* ---------- Borders ---------- */
.ce-border    { border: 1px solid var(--ce-line); }
.ce-border-2  { border: 1px solid var(--ce-line-2); }
.ce-border-t  { border-top: 1px solid var(--ce-line); }
.ce-border-b  { border-bottom: 1px solid var(--ce-line); }
.ce-border-l  { border-left: 1px solid var(--ce-line); }
.ce-border-r  { border-right: 1px solid var(--ce-line); }
.ce-rounded   { border-radius: var(--ce-radius); }
.ce-rounded-lg{ border-radius: var(--ce-radius-lg); }
.ce-rounded-full { border-radius: 9999px; }
.ce-shadow    { box-shadow: var(--ce-shadow); }
.ce-shadow-md { box-shadow: var(--ce-shadow-md); }

/* ---------- Position ---------- */
.ce-relative { position: relative; }
.ce-absolute { position: absolute; }
.ce-sticky   { position: sticky; }
.ce-top-0    { top: 0; }
.ce-z-10     { z-index: 10; }
.ce-z-50     { z-index: 50; }

/* ---------- Misc ---------- */
.ce-overflow-hidden { overflow: hidden; }
.ce-cursor-pointer  { cursor: pointer; }
.ce-transition      { transition: all .15s ease; }
.ce-object-contain  { object-fit: contain; }
.ce-object-cover    { object-fit: cover; }

/* =========================================================================
   Responsive — single breakpoint set, mobile-first overrides.
   Templates use desktop classes; these collapse them on small screens.
   ========================================================================= */
@media (max-width: 1024px) {
  .ce-grid-main,
  .ce-grid-arch { grid-template-columns: minmax(0,1fr); }
  .ce-grid-3    { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .ce-grid-2,
  .ce-grid-3,
  .ce-grid-4 { grid-template-columns: minmax(0,1fr); }
  .ce-sm-hidden { display: none; }
  .ce-sm-stack  { flex-direction: column; align-items: stretch; }
  .ce-text-3xl { font-size: 26px; }
  .ce-text-2xl { font-size: 22px; }
}