/* ABOUTME: Design token layer for the Readme LMS learner experience — the ONLY file a client edits to retheme. */
/* ABOUTME: Defines color, type, spacing, radius, and shadow custom properties on the .readme-learn body class. */

/*
 * Readme LMS — Design Tokens
 * --------------------------
 * Current brand: Code the Dream.
 *
 * To retheme for a different organization, change values here and ONLY here.
 * learn.css consumes these tokens exclusively and never hardcodes brand values.
 *
 * Contrast notes (do not break these when retheming):
 *   - --readme-accent-ink is the text color used ON --readme-accent surfaces.
 *     For CTD orange (#ff5c35), white text FAILS WCAG AA — navy passes. If you
 *     change the accent, re-check this pairing.
 *   - --readme-warning is reserved for non-text markers (dots, icons) only.
 */

.readme-learn {
	/* ------------------------------------------------------------------ */
	/* Color                                                              */
	/* ------------------------------------------------------------------ */

	/* Surfaces
	 *
	 * Three grounds, not two. The page used to be a distinctly teal #e7f6f4,
	 * which read as a colour choice rather than as paper and made every white
	 * card look like a sticker laid on top of it. The page is now a whisper of
	 * the same teal — close enough to white to disappear, far enough to keep
	 * the brand's temperature — and the old value survives as the INSET tone
	 * for wells inside white cards, which still need to be visible.
	 */
	--readme-surface: #fff;              /* cards, panels, header */
	--readme-page: #f5faf9;              /* the page itself: near-white, teal cast */
	--readme-surface-alt: #eef7f5;       /* wells INSIDE a white card */

	/* Ink (text) */
	--readme-ink: #0a162a;               /* body text */
	--readme-ink-heading: #12284c;       /* headings */
	--readme-ink-muted: #3d4c66;         /* secondary text — 8.0:1 on the teal wash, 8.7:1 on white; pulled toward the brand navy so it sits warm on mint instead of muddy */
	--readme-ink-inverse: #f7fcfc;       /* text on navy surfaces */

	/* Accent — rationed: progress fill + one primary action per screen */
	--readme-accent: #ff5c35;            /* CTD orange */
	--readme-accent-ink: #12284c;        /* text ON orange (navy; never white — white is 3.07:1 on the accent and fails AA) */

	/* The primary action. Navy with white text: 14.65:1, where orange with navy
	   text managed 4.77:1 and orange with white text fails outright. Orange
	   stays the accent — links, icons, the attention chip — so the ration is
	   spent on drawing the eye rather than on the button that already has
	   size, weight and position doing that job. */
	--readme-action: #12284c;
	--readme-action-ink: #ffffff;
	--readme-action-hover: #1b3a6b;
	--readme-link: #c43d10;              /* burnt orange for text links — AA on white */

	/* Feedback */
	/* "Done" markers. Pulled off grass-green and into the brand's teal family:
	   same meaning, one less colour family on screen, and better contrast on
	   both grounds (6.4:1 white / 5.7:1 mint, against 5.0 / 4.5 before). */
	--readme-success: #116b62;
	--readme-success-wash: #e7f6f4;
	--readme-error: #b3261e;
	--readme-error-wash: #fdeeec;
	/* "Needs you" markers. The yellow this replaced was the only warm colour on
	   the page that was not the brand orange, and it read as a different system
	   shouting. Attention is the accent's job. */
	--readme-attention: var(--readme-accent);
	--readme-attention-wash: #fff3ef;    /* the flag's ground — a tint, not an outline */
	--readme-warning: #f3c300;           /* non-text markers only (dots, icons) */

	/* Structure */
	--readme-focus: #ff5c35;             /* focus ring color */
	--readme-progress-track: #dbe9e7;
	--readme-navy: #12284c;              /* brand navy (bar background, rules) */
	--readme-border: #d5dde3;
	--readme-teal: #b3e1dc;              /* mid teal — quiet markers, low-urgency rules */
	--readme-navy-wash: #eef2f7;         /* palest navy — chips, "up next" row, card feet */

	/* ------------------------------------------------------------------ */
	/* Layout measures                                                    */
	/* ------------------------------------------------------------------ */
	/* ONE page grid for header, content and sticky bar — they must share a
	   left edge. Prose keeps its own narrower reading measure. */

	--readme-measure: 75rem;             /* 1200px page grid */
	--readme-measure-text: 68ch;         /* reading column for prose */
	--readme-measure-form: 37.5rem;      /* 600px composed form card */
	--readme-rail: 20rem;                /* 320px secondary column */
	--readme-outline: 15.5rem;           /* 248px lesson outline rail */

	/* ------------------------------------------------------------------ */
	/* Typography                                                         */
	/* ------------------------------------------------------------------ */

	--readme-font-display: "roc-grotesk-condensed", "Archivo Narrow", "Arial Narrow", sans-serif;
	--readme-font-body: "Rubik", -apple-system, "Segoe UI", sans-serif;
	--readme-font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;

	/* ------------------------------------------------------------------ */
	/* Space scale (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px as rem)   */
	/* ------------------------------------------------------------------ */

	--readme-space-1: 0.25rem;   /*  4px */
	--readme-space-2: 0.5rem;    /*  8px */
	--readme-space-3: 0.75rem;   /* 12px */
	--readme-space-4: 1rem;      /* 16px */
	--readme-space-5: 1.5rem;    /* 24px */
	--readme-space-6: 2rem;      /* 32px */
	--readme-space-7: 3rem;      /* 48px */
	--readme-space-8: 4rem;      /* 64px */
	--readme-space-9: 6rem;      /* 96px */

	/* ------------------------------------------------------------------ */
	/* Radii                                                              */
	/* ------------------------------------------------------------------ */

	--readme-radius-sm: 3px;
	--readme-radius-md: 8px;
	--readme-radius-lg: 16px;
	--readme-radius-xl: 24px;

	/* ------------------------------------------------------------------ */
	/* Shadows — exactly two; the design is otherwise flat                */
	/* ------------------------------------------------------------------ */

	/* Cards on a near-white page. The old teal ground separated white cards on
	   its own; now that the page is almost paper, a 1px grey line is the only
	   thing holding them off it, and a page of grey rectangles is what that
	   looks like. A shadow this soft is not decoration — it is the separation
	   the background used to provide. */
	--readme-shadow-card: 0 1px 2px rgb(18 40 76 / 0.04), 0 2px 8px rgb(18 40 76 / 0.04);
	--readme-shadow-bar: 0 -2px 12px rgb(18 40 76 / 0.10);      /* sticky bottom bar */
	--readme-shadow-raised: 0 8px 24px rgb(18 40 76 / 0.16);    /* dialogs only */
}