/* Simple Tutor looks: colorful, simple (the default, defined in base.css), and professional. A look is a set of token
   values, in light and dark, plus a few shape and type rules; every component reads the tokens, so modules need
   nothing of their own. The choice lives on <html data-look>, set before paint by the head script from localStorage.
   The colorful look's key is "kids", its first name, so a choice saved under that name keeps working. */

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/nunito.woff2") format("woff2");
}

/* Colorful: sunny and round. A blue, violet, and pink gradient for the brand blocks, a warm yellow for the one
   important button, cream paper, a rounded typeface, big radii, and five accent colours (--c1 to --c5) that take turns
   on cards, chips, and the step numbers. White text stays above 4.5:1 across the whole gradient. */
[data-look="kids"] {
  --brand-3: #DB2777;
  --c1: #2563EB;
  --c2: #7C3AED;
  --c3: #DB2777;
  --c4: #0D9488;
  --c5: #F59E0B;
  --c1-bg: #DBEAFE;
  --c2-bg: #EDE9FE;
  --c3-bg: #FCE7F3;
  --c4-bg: #CCFBF1;
  --c5-bg: #FEF3C7;
  --navy: #1F3C88;
  --navy-700: #2A4FB0;
  --navy-100: #E3F0FF;
  --ink: #1B2A4A;
  --muted: #4E5D78;
  --white: #FFFFFF;
  --paper: #FFF8E7;
  --line: #E6E1D3;
  --line-strong: #CFC8B5;
  --orange: #FFB703;
  --orange-400: #FFC933;
  --orange-600: #F5A100;
  --orange-700: #A85F00;
  --orange-100: #FFF1C2;
  --green: #15803D;
  --red: #B91C3C;
  --brand: #2563EB;
  --brand-2: #7C3AED;
  --brand-hover: #1D4ED8;
  --on-brand: #FFFFFF;
  --on-orange: #1B2A4A;
  --green-bg: #DFF7EA;
  --green-bg-hover: #CDF0DD;
  --green-line: #2BB673;
  --green-ink: #145A38;
  --red-bg: #FFE3E3;
  --red-bg-hover: #FFD3D3;
  --red-line: #F5A3A3;
  --tint: rgba(31, 60, 136, 0.08);
  --radius: 20px;
  --font: "Nunito", "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
[data-look="kids"][data-theme="dark"] {
  --brand-3: #BE185D;
  --c1: #60A5FA;
  --c2: #A78BFA;
  --c3: #F472B6;
  --c4: #2DD4BF;
  --c5: #FBBF24;
  --c1-bg: #1E3A6E;
  --c2-bg: #3B2A6B;
  --c3-bg: #5A1E45;
  --c4-bg: #134E4A;
  --c5-bg: #4A3A10;
  --navy: #9CC2FF;
  --navy-700: #C9DDFF;
  --navy-100: #223564;
  --ink: #F1F5FF;
  --muted: #B8C4E6;
  --white: #0F1B33;
  --paper: #16244A;
  --line: #2C3F6B;
  --line-strong: #3E5488;
  --orange-700: #FFD166;
  --orange-100: #4A3A10;
  --green: #5EDC9C;
  --red: #FF8A8A;
  --brand: #1D4ED8;
  --brand-2: #6D28D9;
  --brand-hover: #2563EB;
  --green-bg: #143B2A;
  --green-bg-hover: #1A4A35;
  --green-line: #3FA56A;
  --green-ink: #BFF3D6;
  --red-bg: #45201F;
  --red-bg-hover: #552826;
  --red-line: #8A2E2E;
  --tint: rgba(255, 255, 255, 0.08);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
[data-look="kids"] .btn, [data-look="kids"] .chip, [data-look="kids"] .menu-toggle, [data-look="kids"] .appearance summary { border-radius: 999px; }
[data-look="kids"] .hero, [data-look="kids"] .site-footer { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 55%, var(--brand-3) 100%); }
[data-look="kids"] .card, [data-look="kids"] .tutor-card, [data-look="kids"] .plan { border-width: 2px; }
[data-look="kids"] h1, [data-look="kids"] h2, [data-look="kids"] h3 { letter-spacing: 0; font-weight: 800; }
[data-look="kids"] .steps li::before { border-radius: 40% 60% 55% 45% / 55% 45% 55% 45%; }   /* a friendly blob instead of a circle */
[data-look="kids"] .tutor-card__photo, [data-look="kids"] .face img, [data-look="kids"] .profile__photo { border-radius: var(--radius); }

/* The accent colours take turns: a coloured band on top of each tutor card and plan card, a tinted chip, a coloured
   step number, and a tinted hover behind each face. */
[data-look="kids"] .tutor-card, [data-look="kids"] .plan { border-top: 6px solid var(--c1); }
[data-look="kids"] .tutor-card:nth-child(5n+2), [data-look="kids"] .plan:nth-child(5n+2) { border-top-color: var(--c2); }
[data-look="kids"] .tutor-card:nth-child(5n+3), [data-look="kids"] .plan:nth-child(5n+3) { border-top-color: var(--c3); }
[data-look="kids"] .tutor-card:nth-child(5n+4), [data-look="kids"] .plan:nth-child(5n+4) { border-top-color: var(--c4); }
[data-look="kids"] .tutor-card:nth-child(5n+5), [data-look="kids"] .plan:nth-child(5n+5) { border-top-color: var(--c5); }
[data-look="kids"] .tutor-card__subject { color: var(--brand-2); }
[data-look="kids"][data-theme="dark"] .tutor-card__subject { color: var(--c2); }
[data-look="kids"] .chip { background: var(--c1-bg); }
[data-look="kids"] li:nth-child(5n+2) > .chip { background: var(--c2-bg); }
[data-look="kids"] li:nth-child(5n+3) > .chip { background: var(--c3-bg); }
[data-look="kids"] li:nth-child(5n+4) > .chip { background: var(--c4-bg); }
[data-look="kids"] li:nth-child(5n+5) > .chip { background: var(--c5-bg); }
[data-look="kids"] .steps li:nth-child(3n+2)::before { background: #7C3AED; color: #FFFFFF; }
[data-look="kids"] .steps li:nth-child(3n+3)::before { background: #DB2777; color: #FFFFFF; }
[data-look="kids"] .face:hover { background: var(--c2-bg); }
[data-look="kids"] .face:nth-child(5n+1):hover { background: var(--c1-bg); }
[data-look="kids"] .face:nth-child(5n+3):hover { background: var(--c3-bg); }
[data-look="kids"] .face:nth-child(5n+4):hover { background: var(--c4-bg); }
[data-look="kids"] .face:nth-child(5n+5):hover { background: var(--c5-bg); }

/* Professional: quiet and square. Charcoal brand blocks, a steel blue where the simple look uses orange, no shadows,
   small radii, and slightly lighter headings. */
[data-look="professional"] {
  --navy: #1E3A5F;
  --navy-700: #2C4F7C;
  --navy-100: #EEF2F7;
  --ink: #1F2937;
  --muted: #5B6675;
  --white: #FFFFFF;
  --paper: #F4F6F9;
  --line: #D9DEE5;
  --line-strong: #B9C2CE;
  --orange: #1E3A5F;
  --orange-400: #2C4F7C;
  --orange-600: #16293F;
  --orange-700: #1E3A5F;
  --orange-100: #E3EAF3;
  --green: #15803D;
  --red: #B91C1C;
  --brand: #111827;
  --brand-hover: #1F2937;
  --on-brand: #FFFFFF;
  --on-orange: #FFFFFF;
  --green-bg: #E7F4EC;
  --green-bg-hover: #D9EDE0;
  --green-line: #2F855A;
  --green-ink: #14532D;
  --red-bg: #FBEAEA;
  --red-bg-hover: #F6DADA;
  --red-line: #E5A3A3;
  --tint: rgba(31, 41, 55, 0.07);
  --radius: 6px;
  --shadow: none;
}
[data-look="professional"][data-theme="dark"] {
  --navy: #C7D3E3;
  --navy-700: #E5ECF5;
  --navy-100: #1B2740;
  --ink: #E5E7EB;
  --muted: #9AA5B5;
  --white: #0B1220;
  --paper: #111A2B;
  --line: #263248;
  --line-strong: #37465F;
  --orange: #8FB3E6;
  --orange-400: #A9C6EE;
  --orange-600: #7AA1D8;
  --orange-700: #A9C6EE;
  --orange-100: #1E2E4A;
  --green: #4ADE80;
  --red: #F87171;
  --brand: #1B2740;
  --brand-hover: #243350;
  --on-orange: #0B1220;
  --green-bg: #14301F;
  --green-bg-hover: #1B3D28;
  --green-line: #3FA56A;
  --green-ink: #BBF7D0;
  --red-bg: #3B1D1D;
  --red-bg-hover: #4A2323;
  --red-line: #7F1D1D;
  --tint: rgba(255, 255, 255, 0.08);
}
[data-look="professional"] h1, [data-look="professional"] h2, [data-look="professional"] h3, [data-look="professional"] h4 { font-weight: 600; letter-spacing: -0.02em; }
[data-look="professional"] .btn { font-weight: 600; }
[data-look="professional"] .card, [data-look="professional"] .tutor-card { box-shadow: none; }
[data-look="professional"] .site-nav__list a.site-nav__admin, [data-look="professional"] .chip, [data-look="professional"] .appearance__option { border-radius: 6px; }