/* =============================================================================================
   Qora — skin over Designframe
   ---------------------------------------------------------------------------------------------
   Designframe (dist/output.css, copied in from df-ui) is the SYSTEM: grid + block slots, spacing
   and type tokens, cards, header, callouts, tables, the cascade layers. This file is Qora's LOOK,
   applied through DF's own extension points, in this order:

   1. Brand tokens        :root --qs-color-*            (DF's brand-configurable surface)
   2. Font roles          @font-face displayFontFamily / headingFontFamily / bodyFontFamily
                          (DF: "consumers swap src URLs without touching :root vars")
   3. Qora variables      :root --qora-*                (project-prefixed; never qs-/df-/dfp-)
   4. Skin                @layer consumer { … }         (df-rules §15.9 — sorts after DF's components
                          and utilities, BEFORE df-motion/df-state, so DF's reduced-motion and
                          disabled guarantees still win over anything here)

   Palette = the Qora app (prototype/viewer.html). Layout classes in the HTML stay DF's.
   ============================================================================================= */

/* 1 — Brand tokens */
:root {
	--qs-color-key: 51 103 252;            /* cobalt #3367FC */
	--qs-color-key-rgb: 51, 103, 252;
	--qs-color-key-end: 0 66 175;          /* deep #0042AF */
	--qs-color-key-end-rgb: 0, 66, 175;
	--qs-color-key-alt: 25 184 224;        /* cyan #19B8E0 */
	--qs-color-key-alt-rgb: 25, 184, 224;
	--qs-color-key-end-alt: 51 103 252;
	--qs-color-key-end-alt-rgb: 51, 103, 252;
	--qs-color-primary: 11 27 63;          /* ink #0B1B3F */
	--qs-color-secondary: 74 88 120;       /* ink2 #4A5878 */
	--qs-color-tertiary: 140 151 176;      /* ink3 #8C97B0 */
}

/* 2 — Font roles. Display + heading: Futura where the system has it (the 2016 deck's face), else DF's
   own Satoshi. Body: Inter (OFL, src/fonts/LICENSE-Inter.txt). Declared after DF's faces, so these win. */
@font-face {
	font-family: 'displayFontFamily';
	src: local('Futura-Medium'), local('Futura Medium'), local('Futura'),
	     url('src/fonts/Satoshi-Variable.woff2') format('woff2-variations');
	font-weight: 300 900; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'headingFontFamily';
	src: local('Futura-Medium'), local('Futura Medium'), local('Futura'),
	     url('src/fonts/Satoshi-Variable.woff2') format('woff2-variations');
	font-weight: 300 900; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'bodyFontFamily';
	src: url('src/fonts/Inter-Variable.woff2') format('woff2-variations');
	font-weight: 100 900; font-style: normal; font-display: swap;
}

/* 3 — Qora variables */
:root {
	--qora-line: 231 236 246;              /* #E7ECF6 */
	--qora-tint: 244 247 255;              /* #F4F7FF */
	--qora-teal: 43 179 163;               /* #2BB3A3 — "steady" */
	--qora-amber: 245 165 36;              /* #F5A524 */
	--qora-gradient: linear-gradient(100deg, rgb(var(--color-key-alt)), rgb(var(--color-key)) 55%, rgb(var(--color-key-end)));
}

/* 4 — Skin */
@layer consumer {

	/* Type: ink headings (DF defaults to key-gradient heading text); gradient only where marked. */
	:is(h1, h2, h3, h4, h5, h6) {
		color: rgb(var(--color-primary));
		background-image: none;
		-webkit-text-fill-color: currentColor;
		font-weight: 500;
		letter-spacing: -0.005em;
	}
	.qora-accent {
		background-image: var(--qora-gradient);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.qora-eyebrow {
		font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
		color: rgb(var(--color-key));
	}
	.qora-lede { max-width: 40rem; }

	/* Header: sticky, translucent white, hairline. */
	.qora-header {
		position: sticky; top: 0; z-index: 10;
		background: rgb(255 255 255 / .88);
		backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
		border-bottom: 1px solid rgb(var(--qora-line));
	}
	.qora-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display), sans-serif; font-weight: 500; font-size: 24px; color: rgb(var(--color-key)); text-decoration: none; }
	.qora-pill {
		font: 600 10px var(--font-body), sans-serif; letter-spacing: .12em; text-transform: uppercase;
		color: rgb(var(--color-key-end)); background: rgb(var(--qora-tint));
		border: 1px solid rgb(var(--qora-line)); border-radius: 999px; padding: 3px 8px;
	}
	.qora-nav { display: flex; gap: 4px; flex-wrap: nowrap; justify-content: flex-end; }
	.qora-nav a { flex-shrink: 0; }
	.qora-nav a {
		font-size: 14px; font-weight: 500; color: rgb(var(--color-secondary));
		padding: 8px 12px; border-radius: 999px; text-decoration: none;
		background-image: none; -webkit-text-fill-color: currentColor;
	}
	.qora-nav a:hover, .qora-nav a[aria-current="page"] { color: rgb(var(--color-key)); background: rgb(var(--qora-tint)); }

	/* Bands */
	.qora-hero { background: radial-gradient(ellipse 70% 60% at 70% 30%, rgb(var(--color-key) / .10) 0%, transparent 70%); }
	.qora-tint { background: rgb(var(--qora-tint)); }

	/* Promise pills */
	.qora-promises { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
	.qora-promises li {
		display: flex; align-items: center; gap: 8px;
		font-size: 14px; font-weight: 500; color: rgb(var(--color-primary));
		background: #fff; border: 1px solid rgb(var(--qora-line)); border-radius: 999px; padding: 8px 14px;
	}
	.qora-promises li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--qora-teal)); }

	/* Screenshot: DF's .dfp-screenshot-frame does the sizing; this is its finish. */
	.qora-shot { border: 1px solid rgb(var(--qora-line)); border-radius: 16px; box-shadow: 0 30px 80px -30px rgb(11 27 63 / .35); }

	/* Equal-height card rows: DF's .grid-auto and .section-grid top-align (align-items: flex-start)
	   by design; this opt-in modifier stretches each item to its row height instead. */
	:is(.grid-auto, .section-grid).qora-even { align-items: stretch; }

	/* Cards: DF .card keeps its padding + derived radius; Qora surface on top. */
	.card { background: #fff; border: 1px solid rgb(var(--qora-line)); box-shadow: none; }
	.card p { color: rgb(var(--color-secondary)); }
	.qora-num {
		display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
		background: linear-gradient(135deg, rgb(var(--color-key-alt)), rgb(var(--color-key)));
		color: #fff; font-size: 13px; font-weight: 600;
	}
	.qora-tags { display: flex; gap: 6px; flex-wrap: wrap; }
	.qora-tag { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 3px 8px; }
	.qora-tag.measured { color: #0E7A6E; background: #E2F6F3; }
	.qora-tag.inferred { color: #8A5A00; background: #FFF2D9; }
	.qora-tag.self-reported { color: #5B35C9; background: #EFE9FF; }

	/* Local-first diagram */
	.qora-flow { font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--color-tertiary)); }
	.card.qora-you { border: 2px solid rgb(var(--color-key)); background: linear-gradient(180deg, rgb(var(--color-key) / .06), #fff); }
	.qora-list { margin: 0; padding-left: 18px; list-style: disc; color: rgb(var(--color-secondary)); }
	.qora-list li { margin: 4px 0; }

	/* Callouts */
	.qora-note {
		border-left: 3px solid rgb(var(--qora-amber));
		background: color-mix(in srgb, rgb(var(--qora-amber)) 9%, #fff);
		padding: 16px 20px; border-radius: 0 12px 12px 0; color: rgb(var(--color-secondary));
	}
	.qora-summary { background: rgb(var(--qora-tint)); border: 1px solid rgb(var(--qora-line)); border-radius: 16px; padding: 20px 24px; }
	mark { background: #FFF2B3; color: #5A4500; border-radius: 4px; padding: 0 5px; font-weight: 600; }

	/* Legal prose */
	.qora-legal :is(p, li) { color: rgb(var(--color-secondary)); }
	.qora-legal strong { color: rgb(var(--color-primary)); }
	.qora-legal :is(ol, ul) { padding-left: 20px; }
	.qora-legal ol { list-style: decimal; }
	.qora-legal ul { list-style: disc; }

	/* Footer */
	.qora-footer { border-top: 1px solid rgb(var(--qora-line)); color: rgb(var(--color-tertiary)); font-size: 14px; }
	.qora-footer a { color: rgb(var(--color-secondary)); text-decoration: none; background-image: none; -webkit-text-fill-color: currentColor; }
}