@import url('font-tokens.css');
/* Override fixed font families in existing mockups, preserving size, weight and spacing. */
body,body *{font-family:var(--preview-font-body)!important}
body :is(h1,h2,h3,h4,h5,h6){font-family:var(--preview-font-display)!important}
body :is(.stat-value,.overview-kpi-value,.ai-num,.ai-rid,.ai-kpi-value,.metric-value,.learning-stats strong){font-family:var(--preview-font-number)!important}
.profile-dropdown{width:310px;max-height:calc(100dvh - 76px);overflow-y:auto}
.profile-font-picker{border:0;border-top:1px solid var(--color-border);margin:9px 0 0;padding:12px 4px 5px;min-width:0}
.profile-font-picker legend{float:left;width:100%;padding:0 6px 8px;color:var(--color-muted);font-size:calc(11px * var(--ui-font-scale,1));font-weight:600;letter-spacing:.04em}
.profile-font-option{display:flex;align-items:center;gap:11px;padding:10px;border-radius:8px;cursor:pointer;clear:both}
.profile-font-option:hover,.profile-font-option:focus-within{background:var(--color-surface-soft);color:var(--color-text)}.profile-font-option:has(input:checked){background:var(--color-accent-soft);color:var(--color-accent-text)}
.profile-font-option input{width:15px;height:15px;accent-color:var(--color-primary);flex:none;margin:0}.profile-font-option strong{display:block;font-size:calc(13px * var(--ui-font-scale,1));font-weight:600}.profile-font-option small{display:block;font-size:calc(10px * var(--ui-font-scale,1));color:var(--color-muted);margin-top:3px}
body .font-jakarta span,body .font-jakarta strong,body .font-jakarta small{font-family:"Plus Jakarta Sans",sans-serif!important}
body .font-original span,body .font-original strong,body .font-original small{font-family:"Quicksand",sans-serif!important}
body .font-ai strong{font-family:"Bricolage Grotesque",sans-serif!important}body .font-ai small{font-family:"Hanken Grotesk",sans-serif!important}

/* Personal preferences. Component sizes share this single text scale. */
.profile-preference-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;clear:both;padding:2px 4px}
.profile-size-options{grid-template-columns:repeat(3,minmax(0,1fr))}
.profile-choice{position:relative;display:grid;place-items:center;min-height:42px;min-width:0;border:1px solid var(--color-border);border-radius:7px;cursor:pointer;color:var(--color-text);background:var(--color-surface);font-size:calc(13px * var(--ui-font-scale,1));font-weight:600}
.profile-choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.profile-choice:hover{background:var(--color-surface-soft)}
.profile-choice:has(input:checked){border-color:var(--color-accent-text);box-shadow:inset 0 0 0 1px var(--color-accent-text)}
.profile-choice:focus-within{outline:2px solid var(--color-accent-text);outline-offset:2px}
.profile-color-choice span{width:24px;height:24px;border-radius:4px;background:var(--preference-swatch,var(--color-surface-soft));display:grid;place-items:center;font-size:calc(9px * var(--ui-font-scale,1))}
.profile-color-choice:has(input[value="#0066ff"]){--preference-swatch:#0066ff}
.profile-color-choice:has(input[value="#009178"]){--preference-swatch:#009178}
.profile-color-choice:has(input[value="#790208"]){--preference-swatch:#790208}
.profile-color-choice:has(input[value="#7c3aed"]){--preference-swatch:#7c3aed}
.profile-color-choice:has(input[value="#c2410c"]){--preference-swatch:#c2410c}

body .font-fraunces :is(span,strong,small){font-family:"Fraunces",serif!important}