/**
 * Design tokens — NIT Raipur USA Alumni Association
 *
 * The single source of truth for every colour, size, space, radius and shadow
 * (DSN-2, DSN-8, NFR-STYLE-1). Nothing anywhere else in the theme may contain a
 * raw hex value or a one-off pixel size.
 *
 * Colours are sampled from the Association seal and the neon building graphic,
 * with contrast measured against --bg. See docs/requirements/05-design-and-branding.md.
 */

:root {
	/* ---- Surfaces -------------------------------------------------------- */
	--c-bg:            #0a0e1a;  /* page background, from the seal navy, deepened */
	--c-bg-elevated:   #0e1524;
	--c-surface:       #131a2b;  /* cards, panels */
	--c-surface-hover: #1a2338;
	/* One border, everywhere: 1px solid grey-500, rounded (DSN-13).
	   Cards, inputs, selects, panels — all the same. */
	--c-border:        var(--grey-500);
	--c-border-strong: var(--grey-400);
	--border-width:    1px;
	--border:          var(--border-width) solid var(--c-border);
	--border-strong:   var(--border-width) solid var(--c-border-strong);

	/* ---- Brand ----------------------------------------------------------- */
	--c-accent:          #4da3ff; /* neon blue lightened — 7.3:1, safe for body text */
	--c-accent-hover:    #7ab8ff;
	--c-accent-graphic:  #0070f0; /* neon as drawn — 4.2:1, LARGE TEXT AND GRAPHICS ONLY */
	--c-highlight:       #ffc72c; /* the sun in the seal — 12.3:1 */
	--c-highlight-hover: #ffd75e;

	/* DSN-9 — icons and action affordances. Aliased to the accent rather than
	   repeating the value, so the blue only ever changes in one place. */
	--c-icon:       var(--c-accent);
	--c-icon-hover: var(--c-accent-hover);

	/* Decorative only. 1.6:1 and 2.6:1 — never put text on these. */
	--c-brand-navy:   #003080;
	--c-brand-purple: #6b3fa0;
	--c-flag-red:     #c8102e;

	/* ---- Neutral scale ---------------------------------------------------
	   Named steps so text weights are chosen by name, not by inventing a hex.
	   50 is lightest, 900 darkest — the usual direction.

	   NOTE FOR A DARK THEME: the dark end of this scale cannot carry text.
	   grey-800 on --c-bg measures 1.31:1, which is unreadable, not merely low.
	   Body copy uses the light end; the dark end is for surfaces and borders. */
	--grey-50:  #f8fafc;
	--grey-100: #eef2f7;
	--grey-200: #e2e8f0;
	--grey-300: #cbd5e1;
	--grey-400: #94a3b8;
	--grey-500: #6f7c99;
	--grey-600: #4a5670;
	--grey-700: #33415f;
	--grey-800: #222d45;
	--grey-900: #131a2b;

	/* ---- Semantic text ---------------------------------------------------- */
	--c-text:         var(--grey-300);  /* body copy — 13.0:1 */
	--c-text-strong:  var(--grey-100);  /* emphasis within body copy */
	--c-text-muted:   var(--grey-400);  /*  7.9:1 */
	--c-text-subtle:  var(--grey-500);  /* decorative labels only, not prose */

	/* Privileges — an office, a chapter role — wherever they appear (DSN-24).
	   Quieter than the facts around them: a privilege is context, not the
	   headline, and a member scanning a directory is looking for people first. */
	--c-privilege:  var(--grey-500);
	--fs-privilege: calc(var(--fs-base) * 0.6);
	--c-text-on-accent:    #06101f;
	--c-text-on-highlight: #241a00;

	/* ---- Semantic headings ------------------------------------------------ */
	--c-heading:         var(--grey-100);   /* page and article titles */
	--c-heading-section: var(--c-accent);   /* section headings (DSN-10) */
	--c-caption:         var(--c-highlight);

	/* ---- Status ---------------------------------------------------------- */
	--c-success: #3ddc97;
	--c-warning: #ffb020;
	--c-error:   #ff6b6b;
	--c-info:    var(--c-accent);

	/* ---- Type ------------------------------------------------------------ */
	--font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--font-display: var(--font-sans);
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--fs-xs:   0.75rem;
	--fs-sm:   0.875rem;
	--fs-base: 1rem;
	--fs-lg:   1.125rem;
	--fs-xl:   1.375rem;
	--fs-2xl:  1.75rem;
	--fs-3xl:  2.25rem;
	--fs-4xl:  3rem;

	/* Caption treatment (DSN-10): small caps, not uppercase — the letterforms
	   are designed for it rather than being scaled-up capitals. */
	--caps-variant: all-small-caps;
	--caps-tracking: 0.06em;

	--lh-tight: 1.2;
	--lh-snug:  1.4;
	--lh-base:  1.65;

	--fw-normal: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* ---- Space ----------------------------------------------------------- */
	--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;

	/* ---- Radius, shadow, motion ------------------------------------------ */
	--r-sm: 4px;
	--r-md: 8px;
	--r-lg: 14px;
	--r-full: 999px;

	--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
	--shadow-md: 0 4px 14px rgb(0 0 0 / 0.45);
	--shadow-lg: 0 12px 40px rgb(0 0 0 / 0.5);
	--glow-accent: 0 0 22px rgb(0 112 240 / 0.35);

	--transition: 160ms ease;

	/* ---- Layout ---------------------------------------------------------- */
	--container: 1200px;
	--container-narrow: 760px;

	/* Brochure inset: a generous left margin on content, collapsing on smaller
	   screens so a phone is not left with a sliver of readable width. */
	--content-inset: clamp(var(--sp-4), 5vw, 50px);
	--header-height: 112px;   /* accommodates the 80px seal plus breathing room */

	/* Entity card columns (DSN-12). Fixed, not `auto`: with intrinsic widths
	   every card sized its outer cells to its own content, so "Announcement"
	   pushed the title further right than "Event" did and a date with a year
	   pushed it further left than one without. Down a list that reads as
	   ragged rather than as one component. These two are the widths, site-wide
	   -- the directory, the album, and every content listing alike. */
	--ecard-lead: 5.5rem;     /* avatar or type icon, with its caption beneath */
	--ecard-aside: 9rem;      /* date, and status when there is one to report */

	/* On a phone the first cell stops being a column and becomes a block the
	   rest of the card flows around (DSN-32). Its height is fixed so the text
	   that resumes below it resumes at the same place on every card: a first
	   cell sized by its own caption makes the list ragged and the wrap point
	   unpredictable. Holds a 44px avatar, the gap, and two lines of a caption
	   at 60% of body. */
	--ecard-avatar-phone: 44px;
	--ecard-lead-phone: 4.5rem;

	/* Derived, not guessed: the avatar, the gap under it, and exactly two lines
	   of caption. Written as a number first and it was 3px short, which does not
	   hide a line — it slices one in half and shows the tops of the letters. */
	--ecard-lead-h: calc(
		var(--ecard-avatar-phone) + var(--sp-2) + 2 * var(--fs-privilege) * var(--lh-snug)
	);
	--seal-size: 80px;        /* DSN-5: reviewed at size and set to 80 */
	--seal-size-mobile: 72px;

	/* ---- Focus (DSN-6) ---------------------------------------------------- */
	--touch-target: 44px;     /* the smallest thing a finger is asked to hit (DSN-7) */
	--focus-ring: 3px solid var(--c-highlight);
	--focus-offset: 2px;

	/* ---- Tooltip (DSN-36) ------------------------------------------------- */
	/* Above everything, the header and the open drawer included: a tip is
	   about the control under the pointer, wherever that control lives. */
	--z-tooltip: 200;
	--tooltip-max: 18rem;     /* a sentence, not a paragraph */

	/* ---- Help panel (HLP-4) ----------------------------------------------- */
	--help-width: 36rem;      /* a comfortable reading measure for instructions */
	--c-scrim: rgb(4 7 14 / 0.65);   /* what dims the page behind a dialog; the drawer's scrim */
}

/* Respect a user's preference for less motion. */
@media (prefers-reduced-motion: reduce) {
	:root { --transition: 0ms; }
}

/**
 * ---------------------------------------------------------------------------
 * GeneratePress variable bridge
 * ---------------------------------------------------------------------------
 *
 * GeneratePress drives its entire palette through its own custom properties and
 * emits rules like `body{background-color:var(--base-2)}` and
 * `.inside-article{background-color:var(--base-3)}` inline in <head>.
 *
 * Overriding those selector by selector is whack-a-mole: every component we
 * forgot stays light, which is exactly how the first build shipped white
 * content boxes on a dark page. Redefining GeneratePress's variables in terms of
 * our tokens fixes the whole system at once, including parts we have not looked
 * at yet.
 *
 * This is not a value living in the parent theme's settings (ADR-0002 forbids
 * that) — the values are still ours, defined here. We are only teaching the
 * parent which of our tokens to use.
 *
 * If the parent theme is ever swapped, this block is the only part to rewrite.
 */
:root {
	--base:       var(--c-border);
	--base-2:     var(--c-bg);          /* page background */
	--base-3:     var(--c-surface);     /* articles, widgets, cards */
	--contrast:   var(--c-text);        /* body text */
	--contrast-2: var(--c-text-muted);  /* secondary text, nav links */
	--contrast-3: var(--c-text-subtle);
	--accent:     var(--c-accent);
}