/* Hushly Calm: design tokens.
   Day lives on :root. Night and Ember override it.
   Theme selection, in this order of authority:
     1. :root[data-theme="Day" | "Night" | "Ember" | "Auto"]  (the JavaScript sets this)
     2. the Theme radios in Settings, used while no data-theme attribute is set (static prototype)
     3. prefers-color-scheme: dark, only while Auto is in force
   Everything outside this file reads tokens and never a raw colour. */

:root {
  color-scheme: light;

  /* Fonts. Fraunces is for display only. Figtree is for everything else. */
  --FontDisplay: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --FontBody: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --WeightRegular: 400;
  --WeightMedium: 500;
  --WeightBold: 700;
  --WeightDisplay: 600;

  /* Type scale: size and line height */
  --TextDisplaySize: 34px;
  --TextDisplayLine: 40px;
  --TextTitleSize: 26px;
  --TextTitleLine: 32px;
  --TextHeadingSize: 20px;
  --TextHeadingLine: 26px;
  --TextBodyLgSize: 18px;
  --TextBodyLgLine: 26px;
  --TextBodySize: 16px;
  --TextBodyLine: 24px;
  --TextCaptionSize: 14px;
  --TextCaptionLine: 20px;
  --TextLabelSize: 12px;
  --TextLabelLine: 16px;

  /* Spacing, an 8px grid */
  --Space4: 4px;
  --Space8: 8px;
  --Space12: 12px;
  --Space16: 16px;
  --Space24: 24px;
  --Space32: 32px;
  --Space48: 48px;
  --Space64: 64px;
  --Gutter: 16px;
  --CardGap: 24px;
  --CardPad: 16px;

  /* Radii */
  --RadiusChip: 8px;
  --RadiusButton: 16px;
  --RadiusInput: 16px;
  --RadiusCard: 24px;
  --RadiusSheet: 32px;
  --RadiusPill: 999px;

  /* Sizes */
  --ShellMax: 430px;
  --TapMin: 48px;
  --ButtonHeight: 56px;
  --OrbSize: 180px;
  --TopBarHeight: 64px;
  --TabBarHeight: 72px;
  --SafeTop: env(safe-area-inset-top, 0px);
  --SafeBottom: env(safe-area-inset-bottom, 0px);
  --SafeLeft: env(safe-area-inset-left, 0px);
  --SafeRight: env(safe-area-inset-right, 0px);

  /* Day colours */
  --ColorBackdrop: #EEF3EF;
  --ColorBg: #F7F4EE;
  --ColorSurface: #FFFDF9;
  --ColorSurfaceRaised: #FFFDF9;
  --ColorSurfaceSunk: #EEF3EF;
  --ColorField: #FFFDF9;
  --ColorText: #1F3A37;
  --ColorTextSecondary: #56706C;
  --ColorTextTertiary: #5F716C;
  --ColorPrimary: #0F766E;
  --ColorPrimaryPressed: #0B5E58;
  --ColorPrimarySoft: #DCEFEA;
  --ColorPrimaryText: #0F766E;
  --ColorOnPrimary: #FFFFFF;
  --ColorButter: #F4C95D;
  --ColorLavender: #A79BE0;
  --ColorTealDim: #0F766E;
  --ColorBorder: #D8E4E1;
  --ColorDanger: #B23A3A;
  --ColorOnDanger: #FFFFFF;
  --ColorDangerSoft: color-mix(in srgb, var(--ColorDanger) 10%, var(--ColorSurface));
  --ColorFocus: #0F766E;
  --ColorScrim: rgba(31, 58, 55, 0.42);
  --ColorOrbHighlight: #DCEFEA;
  --ColorOnNeed: #1F3A37;
  --ShadowCard: 0 8px 24px rgba(31, 58, 55, 0.08);
  --ShadowSheet: 0 -8px 32px rgba(31, 58, 55, 0.12);
  --ShadowOrb: inset 0 -10px 24px rgba(11, 94, 88, 0.28), 0 14px 32px rgba(15, 118, 110, 0.22);
  --ShadowNone: 0 0 0 0 transparent;
  --RingCard: 0 0 0 0 transparent;
  --AccentWash: 16%;

  /* Pip, day: teal body, cream face, butter beak */
  --ColorPipBody: #0F766E;
  --ColorPipFace: #FFFDF9;
  --ColorPipEye: #1F3A37;
  --ColorPipBeak: #F4C95D;

  /* Need colours: illustration fills only, always paired with an icon and a label.
     Hungry, Tired, WindOrTummy, TooHotOrCold, WantsCloseness, Overstimulated, NotSure and CheckBaby
     come from the design prompt. The other eight come from Public/Lib/Catalog.js. */
  --NeedHungry: #F4C95D;
  --NeedTired: #A79BE0;
  --NeedWindOrTummy: #F2A07B;
  --NeedNeedsABurp: #F5B895;
  --NeedNappyChange: #D9C9A3;
  --NeedTooHotOrCold: #8EC5E8;
  --NeedClothesOrPosition: #A8D5D0;
  --NeedWantsCloseness: #9CC9A8;
  --NeedOverstimulated: #C7A6D9;
  --NeedFrustrated: #E9B0A0;
  --NeedStartled: #B7C7EE;
  --NeedTeething: #F0BCD0;
  --NeedMissingYou: #D8B4C8;
  --NeedSoreAfterJabs: #E3B5A4;
  --NeedNotSure: #C9C4BA;
  --NeedCheckBaby: #E07A8B;

  /* Motion tokens */
  --DurTap: 120ms;
  --DurQuick: 200ms;
  --DurCalm: 400ms;
  --DurGentle: 700ms;
  --EaseSettle: cubic-bezier(0.22, 1, 0.36, 1);
  --EaseRelease: cubic-bezier(0.4, 0, 1, 1);
  --EaseBreathe: cubic-bezier(0.37, 0, 0.63, 1);
  --EaseSpring: cubic-bezier(0.22, 1, 0.36, 1);
  /* Scale of motion. Motion.css sets these for Gentle and Off. */
  --MotionScale: 1;
  --SlideDistance: 16px;
  --TapScale: 0.97;
  --TapOpacity: 1;
}

/* Night: warm, no pure white, no shadows, nothing under 14px. Body copy grows to 18px. */
:root[data-theme="Night"],
:root:not([data-theme]):has(input[name="Theme"][value="Night"]:checked) {
  color-scheme: dark;
  --ColorBackdrop: #0F0D0C;
  --ColorBg: #0F0D0C;
  --ColorSurface: #1B1714;
  --ColorSurfaceRaised: #26201B;
  --ColorSurfaceSunk: #0F0D0C;
  --ColorField: #26201B;
  --ColorText: #DCCDB9;
  --ColorTextSecondary: #B3A08A;
  --ColorTextTertiary: #8F7E6C;
  --ColorPrimary: #D9A066;
  --ColorPrimaryPressed: color-mix(in srgb, #D9A066 82%, #0F0D0C);
  --ColorPrimarySoft: color-mix(in srgb, #D9A066 16%, #1B1714);
  --ColorPrimaryText: #E0AE78;
  --ColorOnPrimary: #1A120A;
  --ColorButter: #D9A066;
  --ColorLavender: #B9AEE6;
  --ColorTealDim: #7FB8AE;
  --ColorBorder: color-mix(in srgb, #DCCDB9 16%, #1B1714);
  --ColorDanger: #F08A7A;
  --ColorOnDanger: #1A120A;
  --ColorFocus: #E0AE78;
  --ColorScrim: rgba(0, 0, 0, 0.55);
  --ColorOrbHighlight: #E0AE78;
  --ColorOnNeed: #1A120A;
  --ShadowCard: var(--ShadowNone);
  --ShadowSheet: var(--ShadowNone);
  --ShadowOrb: var(--ShadowNone);
  --RingCard: inset 0 0 0 1px var(--ColorBorder);
  --AccentWash: 14%;
  --ColorPipBody: color-mix(in srgb, #D9A066 52%, #0F0D0C);
  --ColorPipFace: #DCCDB9;
  --ColorPipEye: #0F0D0C;
  --ColorPipBeak: color-mix(in srgb, #D9A066 82%, #0F0D0C);
  /* Baby art (Docs/Illustrations.md section 5), with the values the pictures were reviewed with in BabyGallery.html:
     warmer light skin tones, a warm outline so deep tones and hands never melt into the dark, and the whole picture at
     70 percent so it never glares. Day defines none of these: its colours are the fallbacks written into every var(). */
  --BabySkin1: #E2B595;
  --BabySkin2: #D9A57E;
  --BabySeam: #8F7E6C;
  --BabyOutline: #8F7E6C;
  --BabyInk: #1A120A;
  --BabyEyeLight: #DCCDB9;
  --BabyTear: #7FB8AE;
  --BabyCarer: #C9AE92;
  --BabyCarerSeam: #8F7E6C;
  --BabyBed: #26201B;
  --BabyArtOpacity: 0.7;
  --TextBodySize: var(--TextBodyLgSize);
  --TextBodyLine: var(--TextBodyLgLine);
  --TextLabelSize: 14px;
  --TextLabelLine: 20px;
}

/* Auto follows the phone. It only applies while no explicit theme is set. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="Auto"],
  :root:not([data-theme]):has(input[name="Theme"][value="Auto"]:checked),
  :root:not([data-theme]):not(:has(input[name="Theme"]:checked)) {
    color-scheme: dark;
    --ColorBackdrop: #0F0D0C;
    --ColorBg: #0F0D0C;
    --ColorSurface: #1B1714;
    --ColorSurfaceRaised: #26201B;
    --ColorSurfaceSunk: #0F0D0C;
    --ColorField: #26201B;
    --ColorText: #DCCDB9;
    --ColorTextSecondary: #B3A08A;
    --ColorTextTertiary: #8F7E6C;
    --ColorPrimary: #D9A066;
    --ColorPrimaryPressed: color-mix(in srgb, #D9A066 82%, #0F0D0C);
    --ColorPrimarySoft: color-mix(in srgb, #D9A066 16%, #1B1714);
    --ColorPrimaryText: #E0AE78;
    --ColorOnPrimary: #1A120A;
    --ColorButter: #D9A066;
    --ColorLavender: #B9AEE6;
    --ColorTealDim: #7FB8AE;
    --ColorBorder: color-mix(in srgb, #DCCDB9 16%, #1B1714);
    --ColorDanger: #F08A7A;
    --ColorOnDanger: #1A120A;
    --ColorFocus: #E0AE78;
    --ColorScrim: rgba(0, 0, 0, 0.55);
    --ColorOrbHighlight: #E0AE78;
    --ColorOnNeed: #1A120A;
    --ShadowCard: var(--ShadowNone);
    --ShadowSheet: var(--ShadowNone);
    --ShadowOrb: var(--ShadowNone);
    --RingCard: inset 0 0 0 1px var(--ColorBorder);
    --AccentWash: 14%;
    --ColorPipBody: color-mix(in srgb, #D9A066 52%, #0F0D0C);
    --ColorPipFace: #DCCDB9;
    --ColorPipEye: #0F0D0C;
    --ColorPipBeak: color-mix(in srgb, #D9A066 82%, #0F0D0C);
    /* Baby art (Docs/Illustrations.md section 5), with the values the pictures were reviewed with in BabyGallery.html:
       warmer light skin tones, a warm outline so deep tones and hands never melt into the dark, and the whole picture at
       70 percent so it never glares. Day defines none of these: its colours are the fallbacks written into every var(). */
    --BabySkin1: #E2B595;
    --BabySkin2: #D9A57E;
    --BabySeam: #8F7E6C;
    --BabyOutline: #8F7E6C;
    --BabyInk: #1A120A;
    --BabyEyeLight: #DCCDB9;
    --BabyTear: #7FB8AE;
    --BabyCarer: #C9AE92;
    --BabyCarerSeam: #8F7E6C;
    --BabyBed: #26201B;
    --BabyArtOpacity: 0.7;
    --TextBodySize: var(--TextBodyLgSize);
    --TextBodyLine: var(--TextBodyLgLine);
    --TextLabelSize: 14px;
    --TextLabelLine: 20px;
  }
}

/* Ember: deep night, red only. No blue and no white anywhere, so every need colour becomes red.
   The need is still told apart by its icon and its label. The secondary text colour is set equal to
   the main one because the darker red only reaches contrast at 24px and up. */
:root[data-theme="Ember"],
:root:not([data-theme]):has(input[name="Theme"][value="Ember"]:checked) {
  color-scheme: dark;
  --ColorBackdrop: #0A0605;
  --ColorBg: #0A0605;
  --ColorSurface: color-mix(in srgb, #C8614A 7%, #0A0605);
  --ColorSurfaceRaised: color-mix(in srgb, #C8614A 11%, #0A0605);
  --ColorSurfaceSunk: #0A0605;
  --ColorField: color-mix(in srgb, #C8614A 7%, #0A0605);
  --ColorText: #C8614A;
  --ColorTextSecondary: #C8614A;
  --ColorTextTertiary: #C8614A;
  --ColorPrimary: #C8614A;
  --ColorPrimaryPressed: #A9503B;
  --ColorPrimarySoft: color-mix(in srgb, #C8614A 12%, #0A0605);
  --ColorPrimaryText: #C8614A;
  --ColorOnPrimary: #0A0605;
  --ColorButter: #C8614A;
  --ColorLavender: #C8614A;
  --ColorTealDim: #A9503B;
  --ColorBorder: #A9503B;
  --ColorDanger: #C8614A;
  --ColorOnDanger: #0A0605;
  /* Text on a surface tinted with its own red drops under 4.5:1, so the soft danger surface is the
     plain surface. The danger card and the Urgent hero keep their 1.5 to 2px danger ring (DM-04). */
  --ColorDangerSoft: var(--ColorSurface);
  --ColorFocus: #C8614A;
  --ColorScrim: rgba(0, 0, 0, 0.6);
  --ColorOrbHighlight: #C8614A;
  --ColorOnNeed: #0A0605;
  --ShadowCard: var(--ShadowNone);
  --ShadowSheet: var(--ShadowNone);
  --ShadowOrb: var(--ShadowNone);
  --RingCard: inset 0 0 0 1px var(--ColorBorder);
  --AccentWash: 12%;
  --ColorPipBody: color-mix(in srgb, #C8614A 55%, #0A0605);
  --ColorPipFace: #C8614A;
  --ColorPipEye: #0A0605;
  --ColorPipBeak: color-mix(in srgb, #C8614A 38%, #0A0605);
  /* Baby art (Docs/Illustrations.md section 5): red only. Skin, hair, outline and seams are reds apart by strength, the
     onesie, backdrop and props follow the --Need tokens (all #C8614A here), and the picture is at 70 percent. */
  --BabySkin1: #934837;
  --BabySkin2: #934837;
  --BabySkin3: #934837;
  --BabySkin4: #934837;
  --BabySkin5: #934837;
  --BabySeam: #A9503B;
  --BabyOutline: #A9503B;
  --BabyHair1: #5F2F24;
  --BabyHair2: #5F2F24;
  --BabyHair3: #5F2F24;
  --BabyHair4: #5F2F24;
  --BabyInk: #0A0605;
  --BabyEyeLight: #C8614A;
  --BabyBlush: #C8614A;
  --BabyMouth: #5F2F24;
  --BabyTear: #C8614A;
  --BabyCarer: #A85A47;
  --BabyCarerSeam: #A9503B;
  --BabyBed: #27140F;
  --BabyArtOpacity: 0.7;
  --NeedHungry: #C8614A;
  --NeedTired: #C8614A;
  --NeedWindOrTummy: #C8614A;
  --NeedNeedsABurp: #C8614A;
  --NeedNappyChange: #C8614A;
  --NeedTooHotOrCold: #C8614A;
  --NeedClothesOrPosition: #C8614A;
  --NeedWantsCloseness: #C8614A;
  --NeedOverstimulated: #C8614A;
  --NeedFrustrated: #C8614A;
  --NeedStartled: #C8614A;
  --NeedTeething: #C8614A;
  --NeedMissingYou: #C8614A;
  --NeedSoreAfterJabs: #C8614A;
  --NeedNotSure: #C8614A;
  --NeedCheckBaby: #C8614A;
  --TextBodySize: var(--TextBodyLgSize);
  --TextBodyLine: var(--TextBodyLgLine);
  --TextLabelSize: 14px;
  --TextLabelLine: 20px;
}