@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Figtree:wght@400;500;600;700&display=swap");
/* ==========================================================================
   Look A: Warm paper
   Direction 1 from docs/research/07-founder-references.md: Craft's feeling
   rebuilt with our own values. A warm off-white page, white cards lifted by
   soft warm-tinted shadows (borders are whisper-faint hairlines), one warm
   near-black for all text, a deep teal spent only on state, a bookish serif
   for the one display heading on each screen and a plain grotesque for
   everything in the tool. Every token from the brief's contract (section 6)
   is set here, first for light, then for dark, then a few flourishes.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;1,8..60,400&display=swap');

[data-look="velvet"] {
  /* --- Description (shown by the switcher) ------------------------------ */
  --look-name: "Warm paper";
  --look-blurb: "Cream page, white cards that float on soft shadows, a serif headline and a calm teal accent.";

  /* --- Colour: surfaces -------------------------------------------------- */
  --color-page: #FAF8F5;           /* warm off-white: the softness lives in the page */
  --color-surface: #FFFFFF;        /* panels stay white */
  --color-raised: #FFFFFF;
  --color-sunken: #EFECE7;         /* wells and quiet fills, one notch warmer than the page */
  --color-overlay: rgba(26, 24, 22, 0.44);

  /* --- Colour: ink (one warm near-black; the greys are tints of it) ------ */
  --color-ink: #1A1816;
  --color-ink-muted: #5D5955;      /* 6.6:1 on page, 6.9:1 on white */
  --color-ink-subtle: #726D68;     /* 4.8:1 on page: placeholders and faint icons */
  --color-ink-inverse: #FAF8F5;
  --color-inverse: #1F1C1A;

  /* --- Colour: lines and focus ------------------------------------------ */
  --color-line: rgba(26, 24, 22, 0.08);   /* Craft-style hairline: ink at 8% */
  --color-line-strong: #8C8680;    /* 3.4:1 on page, 3.6:1 on white: inputs stay clearly bordered */
  --color-ring: #0F766E;           /* 5.2:1 on page */

  /* --- Colour: primary (the black pill) ---------------------------------- */
  --color-primary: #1A1816;
  --color-primary-hover: #2C2825;
  --color-primary-active: #0B0A09;
  --color-on-primary: #FFFFFF;

  /* --- Colour: accent (deep teal, spent on state only) ------------------- */
  --color-accent: #0F766E;
  --color-accent-hover: #0C645D;
  --color-on-accent: #FFFFFF;      /* 5.5:1 on the teal */
  --color-accent-soft: #E6F1EF;
  --color-accent-soft-hover: #D7EAE6;
  --color-accent-ink: #0B625B;     /* 6.8:1 on page, 6.3:1 on the tint; the raw teal would only reach 4.7:1 there */

  /* --- Colour: status (calm, with an icon and a label, never colour alone) */
  --color-success: #2F8A4E;
  --color-success-soft: #E3F2E5;
  --color-success-ink: #1F6B3A;
  --color-warning: #D08F1E;
  --color-warning-soft: #FBF1DC;
  --color-warning-ink: #7D5208;
  --color-danger: #CF3F32;
  --color-danger-soft: #FBE9E6;
  --color-danger-ink: #9E3028;
  --color-danger-hover: #B9352A;
  --color-on-danger: #FFFFFF;
  --color-info: #0F766E;           /* information borrows the accent's family */
  --color-info-soft: #E6F1EF;
  --color-info-ink: #0B625B;

  /* --- Colour: tints (the direction's pastels: sage, sand, butter, sky, blush) */
  --color-tint-1: #DDE8DA;
  --color-tint-2: #F0E4D0;
  --color-tint-3: #F4ECCB;
  --color-tint-4: #D9E7F0;
  --color-tint-5: #F3DEDA;

  /* --- Colour: media ----------------------------------------------------- */
  --color-stage: #ECEAE6;          /* solid warm grey behind every tile */
  --color-on-media: #FFFFFF;
  --color-media-scrim: rgba(0, 0, 0, 0.62);

  /* --- Type: a plain grotesque in the tool, a bookish serif for display --- */
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;                /* the serif sits a touch larger than Inter would */
  --text-4xl: 2.5rem;
  --text-5xl: 3.25rem;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --heading-weight: 400;           /* the serif is set light, as Craft sets its headlines */
  --heading-tracking: -0.01em;
  --heading-leading: 1.12;
  --label-weight: 500;
  --button-weight: 500;

  /* --- Shape and depth: 12 / 16 / 24 / 32 plus pills ---------------------- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --radius-control: 12px;          /* inputs and dropdowns; buttons become pills in the flourishes */
  --radius-card: 24px;
  --radius-tile: 16px;
  --radius-chip: 9999px;

  --border-width: 1px;             /* hairlines stay, but at 8% they are felt, not seen */
  --border-width-control: 1px;

  /* Shadows are tinted with the ink so they read as paper on a desk, not soot. */
  --shadow-xs: 0 1px 2px rgba(26, 24, 22, 0.05);
  --shadow-sm: 0 1px 2px rgba(26, 24, 22, 0.05), 0 2px 6px rgba(26, 24, 22, 0.05);
  --shadow-md: 0 2px 8px rgba(26, 24, 22, 0.06), 0 12px 28px rgba(26, 24, 22, 0.08);
  --shadow-lg: 0 2px 8px rgba(26, 24, 22, 0.06), 0 16px 32px rgba(26, 24, 22, 0.06), 0 40px 40px rgba(26, 24, 22, 0.03), 0 48px 56px rgba(26, 24, 22, 0.02);
  --shadow-card: 0 1px 2px rgba(26, 24, 22, 0.04), 0 6px 16px rgba(26, 24, 22, 0.05);
  --shadow-card-hover: 0 2px 4px rgba(26, 24, 22, 0.04), 0 14px 32px rgba(26, 24, 22, 0.10);
  --shadow-raised: 0 4px 12px rgba(26, 24, 22, 0.06), 0 12px 32px rgba(26, 24, 22, 0.12);
  --shadow-button: 0 1px 2px rgba(26, 24, 22, 0.10), 0 6px 14px rgba(26, 24, 22, 0.12);

  /* --- Space, size (fixed across looks) and motion (unhurried) ----------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --control-h-sm: 36px;
  --control-h-md: 44px;
  --control-h-lg: 52px;
  --icon-stroke: 1.5;

  --width-step: 720px;
  --width-wide: 1040px;
  --width-page: 1240px;

  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 360ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   Dark: the same notebook after dark. Warm near-blacks rather than pure
   grey, the teal two tones lighter with dark text on it, the black pill
   turned white, shadows with doubled alphas plus a faint light ring so the
   lifted cards still read as lifted. Type, shape, space and motion are
   inherited from the light block; only colour and depth change here.
   -------------------------------------------------------------------------- */

[data-look="velvet"][data-theme="dark"] {
  --color-page: #171615;
  --color-surface: #201F1D;
  --color-raised: #292826;
  --color-sunken: #2C2A27;
  --color-overlay: rgba(0, 0, 0, 0.6);

  --color-ink: #F2F0ED;
  --color-ink-muted: #B4AEA7;
  --color-ink-subtle: #8B857E;
  --color-ink-inverse: #171615;
  --color-inverse: #F2F0ED;

  --color-line: rgba(255, 255, 255, 0.08);
  --color-line-strong: #736E67;
  --color-ring: #5CCFBF;

  --color-primary: #F2F0ED;
  --color-primary-hover: #FFFFFF;
  --color-primary-active: #DBD8D3;
  --color-on-primary: #171615;

  --color-accent: #5CCFBF;
  --color-accent-hover: #74DACB;
  --color-on-accent: #0B2A27;
  --color-accent-soft: #17332F;
  --color-accent-soft-hover: #1D3F3A;
  --color-accent-ink: #7FDDD0;

  --color-success: #4CAF72;
  --color-success-soft: #17302A;
  --color-success-ink: #8AD9A8;
  --color-warning: #DDA03A;
  --color-warning-soft: #372B16;
  --color-warning-ink: #EEC479;
  --color-danger: #CF3F32;
  --color-danger-soft: #3B1F1C;
  --color-danger-ink: #FFA096;
  --color-danger-hover: #DA4A3E;
  --color-on-danger: #FFFFFF;
  --color-info: #5CCFBF;
  --color-info-soft: #17332F;
  --color-info-ink: #7FDDD0;

  --color-tint-1: #28332A;
  --color-tint-2: #3A3224;
  --color-tint-3: #3A3520;
  --color-tint-4: #243038;
  --color-tint-5: #3A2A28;

  --color-stage: #262422;
  --color-on-media: #FFFFFF;
  --color-media-scrim: rgba(0, 0, 0, 0.72);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.4), 0 16px 32px rgba(0, 0, 0, 0.4), 0 40px 40px rgba(0, 0, 0, 0.25), 0 48px 56px rgba(0, 0, 0, 0.15);
  --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 2px 4px rgba(0, 0, 0, 0.3), 0 14px 32px rgba(0, 0, 0, 0.5);
  --shadow-raised: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 4px 12px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.6);
  --shadow-button: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 14px rgba(0, 0, 0, 0.35);
}

/* --------------------------------------------------------------------------
   Flourishes: the few rules that express the direction beyond its tokens.
   Each is scoped to this look. None changes layout or sizes.
   -------------------------------------------------------------------------- */

/* 1. Pills. Buttons, the paste-a-link field and the logo mark take the full
      radius: the black pill the founder already likes in Craft and Zeely.
      Inputs, dropdowns and menus keep the 12px control radius. */
[data-look="velvet"] .btn,
[data-look="velvet"] .input-group,
[data-look="velvet"] .logo__mark { border-radius: var(--radius-full); }

/* 2. One line of serif italic on the welcome screen, outside the tool. The
      headline has no <em> to carry Craft's single italic word, so the small
      reassurance under the button carries the emotion instead. */
[data-look="velvet"] .welcome__fine {
  font-family: var(--font-display);
  font-style: italic;
}

/* 3. The preview card is lifted off the desk by the four-layer paper shadow,
      the way onboarding panels are in the direction. */
[data-look="velvet"] .player__stage { box-shadow: var(--shadow-lg); }

/* 4. Media is clipped, not framed: tiles lose their hairline and sit on the
      warm stage with only their rounded corners. */
[data-look="velvet"] .thumb { border-color: transparent; }

/* Landing page: sky, clouds, hills, ribbon and glass. Added 2026-10-01. */
[data-look="velvet"] { --color-sky-1: #CFE6EA; --color-sky-2: #FAF8F5; --color-cloud: #FFFFFF; --color-hill-1: #DDE8DA; --color-hill-2: #F0E4D0; --color-ribbon-1: #0F766E; --color-ribbon-2: #F2C98A; --color-ribbon-3: #F6B3A6; --color-glass: rgba(255, 253, 250, 0.74); }
[data-look="velvet"][data-theme="dark"] { --color-sky-1: #15302E; --color-sky-2: #171615; --color-cloud: #2B3331; --color-hill-1: #253129; --color-hill-2: #3A3224; --color-ribbon-1: #2FB8A8; --color-ribbon-2: #9B8352; --color-ribbon-3: #8A5A52; --color-glass: rgba(36, 34, 32, 0.78); }

/* Brand: the velvet wordmark and its yellow petal mark. Added 2026-10-01. */
[data-look="velvet"] { --font-brand: "Fraunces", "Iowan Old Style", Georgia, serif; --color-brand-mark: #F3CF6A; }
[data-look="velvet"][data-theme="dark"] { --color-brand-mark: #F3CF6A; }

/* Velvet: the founder's own direction (2026-10-01). Starts from Warm paper and
   sets the brand: Playfair Display headlines, Figtree interface, a yellow accent
   with dark text, a blue sky, periwinkle and lined-yellow paper, the rainbow.
   Values measured from docs/design/mocks/home-mock.png (see audit-home.json):
   the mock renders all text pure black on a near-white page, the yellow of the
   Generate button is #FDE283, the sky runs #9ED4F8 -> #BAE2FC. */
[data-look="velvet"] {
  --look-name: "Velvet";
  --look-blurb: "Sky, serif and a touch of yellow: the home and sign-in mocks, in the prototype.";
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-brand: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --heading-weight: 500;
  --heading-tracking: -0.015em;
  --heading-leading: 1.08;

  /* Page and ink: the mock's black text on #FDFCFB, cool greys for the quiet parts. */
  --color-page: #FDFCFB;
  --color-sunken: #F2F2F4;
  --color-ink: #0A0A0B;
  --color-ink-muted: #5A5D66;      /* 6.8:1 on white */
  --color-ink-subtle: #878996;     /* placeholders (3.6:1 on white) */
  --color-inverse: #111314;
  --color-line: rgba(10, 12, 20, 0.07);
  --color-line-strong: #868994;    /* 3.5:1 on white */
  --color-overlay: rgba(10, 10, 11, 0.44);
  --color-primary: #111314;        /* the Get started pill */
  --color-primary-hover: #26292B;
  --color-primary-active: #000000;

  --color-accent: #F6CF5B;
  --color-accent-hover: #EFC23C;
  --color-on-accent: #1A1816;
  --color-accent-soft: #FFF3C8;
  --color-accent-soft-hover: #FFEBA8;
  --color-accent-ink: #7A5600;
  --color-ring: #B7791F;
  --color-brand: #FDE283;          /* the Generate button */
  --color-brand-hover: #FBDA6A;
  --color-on-brand: #0A0A0B;
  --color-brand-mark: #FAE182;     /* the logo's petals */
  --color-info: #3B82F6;
  --color-info-soft: #E3EEFF;
  --color-info-ink: #1E4FBF;

  /* Sky scene: the CSS fallback (phone widths, other themes) matches the plate's colours. */
  --color-sky-1: #9ED4F8;
  --color-sky-2: #BAE2FC;
  --color-cloud: #F7FAFC;
  --color-cloud-shade: rgba(80, 130, 200, 0.28);  /* the half-tone dot shade under the drawn clouds */
  --color-hill-1: #B7C1F8;
  --color-hill-2: #FEE592;
  --color-hill-line: #A5B166;
  --color-paper-edge: #FFFFFF;     /* the fibre fringe along every torn edge */
  --color-rainbow-1: #AED4FD;      /* the login ribbon's strands, from login-mock.png: sky, violet, magenta, orange, yellow */
  --color-rainbow-2: #B49DFC;
  --color-rainbow-3: #F481BF;
  --color-rainbow-4: #FDA554;
  --color-rainbow-5: #FEE27F;
  --color-glass: rgba(255, 255, 255, 0.84);      /* the nav pill: #F0F8FE over the sky */
  --color-glass-soft: rgba(255, 255, 255, 0.5);  /* the chips: #DCEFFD over the sky */
  --color-play-disc: #FEFEFE;      /* white disc, black glyph on the inspiration tiles */
  --color-play-glyph: #000000;
  --shadow-navpill: 0 1px 2px rgba(31, 86, 135, 0.10), 0 5px 14px rgba(31, 86, 135, 0.18);
  --shadow-float: 0 1px 3px rgba(20, 60, 100, 0.12), 0 8px 18px rgba(20, 60, 100, 0.08);
  --shadow-chip: 0 2px 5px rgba(31, 86, 135, 0.10);
  --shadow-tile-wide: none;

  /* The sky plate: the mock's own sky, clouds and torn paper (tools/make-plates.ps1),
     1410 x 694 for a panel that is the viewport minus 18px each side, 16px from the top. */
  --sky-plate: url("../assets/plates/sky-clean.png");
  --sky-ratio: 1410 / 694;
  --sky-inset-x: 18px;
  --sky-inset-y: 16px;
  --sky-pad-bottom: 44px;          /* with --hero-pad-top 32 and the hero's auto margins this lands the
                                      headline 60px under the pill and the chips 56px above the tear */
  --sky-bottom-radius: 0px;        /* the torn edge is in the plate; no rounded bottom */
  --sky-art-display: none;         /* the CSS clouds and hills stay off while the plate shows */
  --hero-pad-top: 32px;            /* the hero floats between pill and bottom; this is its minimum gap */
  --inspo-overlap: -12px;          /* the title's cap top sits 10px above the plate's page-coloured last rows */

  /* Home geometry at 1440, from the mock. */
  --navpill-w: 1040px;
  --navpill-h: 64px;
  --control-h-nav: 42px;           /* Log in and Get started inside the pill */
  --control-h-xl: 56px;            /* the Generate pill */
  --text-hero: 5.25rem;            /* 84px: the mock's two lines are 612px wide with an 82px pitch;
                                      Playfair at 90px (the mock's cap height) runs 14% wider */
  --hero-weight: 600;
  --hero-leading: 0.975;           /* 82px line pitch */
  --hero-tracking: -0.025em;
  --text-wordmark: 2.5rem;         /* 40px */
  --wordmark-weight: 700;          /* the mock's wordmark is a heavy cut */
  --logo-mark-w: 50px;
  --logo-mark-h: 35px;
  --composer-w: 930px;
  --composer-sep-w: 2px;
  --chip-h: 42px;
  --width-inspo: 1340px;
  --radius-tile-wide: 12px;
  --heading-weight-section: 400;
  --making-mark-w: 150px;

  /* Pricing (Addendum 3), measured from docs/design/mocks/pricing-mock.png. The sky there is
     full-bleed (no page margin): its plate is the whole mock width, cropped at y932 just under
     the torn edge, so the FAQ sits on the page below it. The pill is wider than the home's
     (x185-1263), the cards are 397 wide with 12px between them, off-white #FDFAF6, 24px
     corners; the middle one has a 2px yellow border, a pale yellow badge and the brand button. */
  --sky-pricing-plate: url("../assets/plates/pricing-sky.png");
  --sky-pricing-ratio: 1448 / 932;
  --sky-pricing-pad-top: 31px;     /* the pill's top edge in the mock */
  --sky-pricing-pad-bottom: 20px;
  --navpill-w-wide: 1078px;
  --nav-active-h: 38px;            /* the soft yellow pill behind "Pricing" (x813-905, y44-82) */
  --color-brand-soft: #FEF4D9;     /* that pill's fill */
  --color-card-cream: #FDFAF6;     /* the plan cards */
  --color-brand-line: #FCDF6A;     /* the recommended card's border */
  --color-badge-brand: #FDE68D;    /* the Recommended badge */
  --color-check: #0E1E70;          /* the navy ticks (#000E6A at their core) */
  --shadow-plan: 0 1px 2px rgba(31, 86, 135, 0.06), 0 8px 24px rgba(31, 86, 135, 0.08);
  --text-pricing-title: 4.375rem;  /* 70px: x-height 36 in the mock, 624px wide */
  --pricing-hero-top: 44px;
  --text-plan-name: 1.875rem;      /* 30px serif plan names (cap height 21-22) */
  --plan-name-weight: 500;
  --text-plan-tag: 1.0625rem;      /* 17px */
  --text-plan-price: 4.5rem;       /* 72px (figures 51px tall) */
  --plan-price-weight: 500;
  --text-plan-per: 1.1875rem;      /* 19px serif "per month" */
  --text-tier-feature: 1.0625rem;  /* 17px: the mock's feature rows have an 18px cap height but run
                                      160px for "1,000 monthly credits", which Figtree does at 17 */
  --plan-w: 397px;
  --plan-gap: 12px;
  --plans-top: 29px;
  --faq-w: 1048px;
  --faq-row-h: 43px;
  --faq-top: 10px;
  --color-hill-3: #D9B8F2;         /* the purple paper (pricing's CSS fallback) */

  /* Login, from audit-login.json (high and medium priorities): the card 600 wide with 60px side
     padding, 20px corners, no border, a neutral shadow; a 64px/700 headline at -0.03em; 56px
     controls; black primary text with cool slate secondaries; underlined ink links. */
  --text-6xl: 3.875rem;            /* 62px: the mock's cap height says 64, but Playfair 700 at 64 runs
                                      414px wide for "Welcome back." against the mock's 388 */
  --display-weight: 700;
  --display-tracking: -0.035em;
  --text-lede: 1.375rem;           /* 22px subline */
  --text-label: 1rem;
  --label-weight: 600;
  --color-label: #1E2538;
  --color-link: #0A0A0B;
  --link-decoration: underline;
  --control-h-lg: 56px;
  --button-weight: 600;
  --color-ink-muted: #424B60;      /* cool slate: 8.4:1 on white */
  --color-line: #E3E7EE;
  --color-line-strong: #A9B1C1;    /* the mock's #D0D5DD is 1.5:1; this keeps the border light and cool at 2.2:1 */
  --color-accent-strong: #FED24D;  /* the ticked checkbox */
  --shadow-lg: 0 1px 3px rgba(16, 20, 31, 0.04), 0 10px 40px rgba(16, 20, 31, 0.08);
  --radius-login-card: 20px;
  --login-card-pad-x: 60px;
  --login-frame-h: 1086px;         /* the mock's frame height: below it the login's vertical rhythm shrinks (base.css .login) */
  --login-bar-h: 116px;
  --login-center-top: 82px;        /* bar bottom (116) to card top (198) in the 1086-tall mock */
  --logo-mark-w-lg: 62px;          /* the login lockup: mark 62 x 43, wordmark 48px */
  --logo-mark-h-lg: 43px;
  --text-wordmark-lg: 2.875rem;    /* 46px: 48 renders the wordmark 125px wide against the mock's 116 */
}
[data-look="velvet"][data-theme="dark"] {
  --color-accent: #F6CF5B;
  --color-accent-hover: #FFDB6E;
  --color-on-accent: #1A1816;
  --color-accent-soft: #3A3214;
  --color-accent-soft-hover: #4A4019;
  --color-accent-ink: #F6CF5B;
  --color-ring: #F6CF5B;
  --color-brand: #F6CF5B;
  --color-brand-hover: #FFDB6E;
  --color-on-brand: #1A1816;
  --color-brand-mark: #F3CF6A;
  --color-info: #6BA2FF;
  --color-info-soft: #1D2A44;
  --color-info-ink: #9CC0FF;
  --color-sky-1: #16233A;
  --color-sky-2: #171615;
  --color-cloud: #2A3040;
  --color-cloud-shade: rgba(0, 0, 0, 0.35);
  --color-hill-1: #262A48;
  --color-hill-2: #3A3320;
  --color-hill-line: #4A5A40;
  --color-paper-edge: #3A3F52;
  --color-rainbow-1: #3E6FB8;
  --color-rainbow-2: #6E55A8;
  --color-rainbow-3: #A85A86;
  --color-rainbow-4: #B8743E;
  --color-rainbow-5: #B89A3E;
  --color-glass: rgba(34, 33, 31, 0.8);
  --color-glass-soft: rgba(34, 33, 31, 0.5);
  --color-play-disc: #F2F0ED;
  --color-play-glyph: #171615;
  --shadow-navpill: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-float: 0 1px 3px rgba(0, 0, 0, 0.4), 0 10px 24px rgba(0, 0, 0, 0.4);
  --shadow-chip: 0 2px 5px rgba(0, 0, 0, 0.35);
  /* The daytime plate has no place on a dark page: the CSS sky, clouds and hills return. */
  --sky-plate: none;
  --sky-ratio: auto;
  --sky-pad-bottom: 150px;
  --sky-bottom-radius: var(--radius-xl);
  --sky-art-display: block;
  --hero-pad-top: 64px;
  --inspo-overlap: 48px;
  --sky-pricing-plate: none;
  --sky-pricing-ratio: auto;
  --sky-pricing-pad-bottom: 96px;
  --color-brand-soft: #3A3214;
  --color-card-cream: #201F1D;
  --color-brand-line: #F6CF5B;
  --color-badge-brand: #3A3214;
  --color-check: #9CC0FF;
  --color-label: #F2F0ED;
  --color-link: #F2F0ED;
  --color-accent-strong: #FFDB6E;
  --color-hill-3: #3A2A44;
  --shadow-plan: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Login card buttons are rounded rectangles in the mock (Sign in radius ~13, Google ~12), unlike
   the pills everywhere else, so the pill flourish above is undone there. */
[data-look="velvet"] .login__card .btn--block { border-radius: var(--radius-md); }