/* ============================================================
   Academy Sharif — design tokens
   Single source of truth. The website and the poster/story
   generators both read from this file. Change a value here,
   never in a component.

   Every colour pair below is contrast-measured, not eyeballed.
   Content colours are solved against the LIGHTEST surface in the
   theme (the card), so they stay AA-compliant on every surface —
   solving against the page background alone is not sufficient.
   ============================================================ */

:root {
  /* ---- brand ramp (decorative; the logo gradient lives here) ---- */
  --brand-300: #6ba1ff;
  --brand-400: #4f8dff;
  --brand-500: #3f63f5;
  --brand-600: #206bed;   /* darkest tint that still carries WHITE text */
  --brand-700: #4320d6;

  /* ---- type scale — ratio ~1.25, base 16px ---- */
  --fs-100: 0.8125rem;   /* 13 — micro / mono labels */
  --fs-200: 0.9375rem;   /* 15 */
  --fs-300: 1.0625rem;   /* 17 — small body */
  --fs-400: 1.1875rem;   /* 19 — body */
  --fs-500: 1.5rem;      /* 24 — lead */
  --fs-600: 1.875rem;    /* 30 — h3 */
  --fs-700: 2.375rem;    /* 38 — h2 */
  --fs-800: 3rem;        /* 48 — h1 */
  --fs-900: clamp(3rem, 8vw, 6rem);  /* display */

  /* ---- spacing scale — 4px base ---- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;
  --sp-7: 3rem;     --sp-8: 4rem;     --sp-9: 6rem;   --sp-10: 8rem;

  /* ---- line height ----
     Persian needs more leading than Latin at the same size. */
  --lh-tight: 1.35;   /* display headings only */
  --lh-snug:  1.6;
  --lh-body:  1.9;    /* Persian body default */
  --lh-loose: 2.1;    /* long Persian paragraphs */

  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-pill: 999px;

  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
}

/* ---- DARK surface (site default) ---- */
:root, [data-theme="dark"] {
  --surface-0: #070b16;   /* page */
  --surface-1: #0a1020;   /* alternating section */
  --surface-2: #0d1426;   /* card */

  --content-strong: #d7e2f3;   /* 15.03:1 */
  --content:        #9aa6bc;   /*  8.01:1 */
  --content-muted:  #7e8ca5;   /*  5.40:1 on the lightest surface (card) */
  --content-subtle: #73829e;   /*  4.73:1 on the lightest surface (card) */

  --border-subtle: #141d33;
  --border:        #1b2740;
  --border-strong: #2f5aa8;

  --accent:        #478bff;    /*  5.99:1 on surface-0 */
  --accent-hover:  #6ba1ff;
  --on-accent:     #ffffff;    /*  4.79:1 on --brand-600 */
}

/* ---- LIGHT surface (posters, print) ---- */
[data-theme="light"] {
  --surface-0: #ffffff;
  --surface-1: #f6f8fc;
  --surface-2: #ffffff;

  --content-strong: #11213c;   /* 16.07:1 */
  --content:        #41516c;   /*  8.02:1 */
  --content-muted:  #5b6d8e;   /*  5.22:1 */
  --content-subtle: #617698;   /*  4.61:1 — safe at 13px */

  --border-subtle: rgba(12,18,38,.09);
  --border:        rgba(12,18,38,.15);
  --border-strong: rgba(20,102,243,.45);

  --accent:        #1466f3;    /*  4.97:1 on white */
  --accent-hover:  #0d55d0;
  --on-accent:     #ffffff;
}

/* ============================================================
   Persian typography rules

   letter-spacing on Arabic-script text breaks the joins between
   letters. It is allowed ONLY on Latin mono labels, which is why
   .mono opts in explicitly rather than it being set globally.
   ============================================================ */
body, p, h1, h2, h3, h4, li, dt, dd, label, input, textarea, button {
  letter-spacing: normal;
}
.mono {
  font-family: var(--mono);
  font-size: var(--fs-100);
  letter-spacing: .3em;      /* Latin only */
  text-transform: uppercase;
  direction: ltr;
  color: var(--content-subtle);
}