/* My Wishlist — built from styles.css by ui_kits/marketing_site/build.mjs. Do not edit. */

/* tokens/fonts.css */
/* My Wishlist — webfonts. Real TTFs extracted from the source blueprint document. */
@font-face{font-family:"Outfit";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/Outfit-Regular.ttf") format("truetype")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/Outfit-Bold.ttf") format("truetype")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/Inter-Regular.ttf") format("truetype")}
@font-face{font-family:"Inter";font-style:italic;font-weight:400;font-display:swap;src:url("assets/fonts/Inter-Italic.ttf") format("truetype")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/Inter-Bold.ttf") format("truetype")}
@font-face{font-family:"Inter";font-style:italic;font-weight:700;font-display:swap;src:url("assets/fonts/Inter-BoldItalic.ttf") format("truetype")}
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/RobotoMono-Regular.ttf") format("truetype")}
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/RobotoMono-Bold.ttf") format("truetype")}

/* tokens/colors.css */
/* My Wishlist — color system.
   Brand hues are sampled directly from the ribbon-and-tag logo mark (assets/logo-mark-clean.png). */
:root{
  /* --- Brand: the three ribbon colours + the kraft tag --- */
  --ribbon-blue:#2f3fc9;
  --ribbon-blue-deep:#2231a6;
  --ribbon-blue-wash:#eceefb;
  --ribbon-red:#fb3b4b;
  --ribbon-red-deep:#d92438;
  --ribbon-red-wash:#feecee;
  --ribbon-violet:#9527c9;
  --ribbon-violet-deep:#7a1ba8;
  --ribbon-violet-wash:#f6ebfc;
  --kraft:#efe0c2;
  --kraft-deep:#e2cda3;
  --twine:#b8a98c;

  /* --- Neutrals: warm paper through cool ink --- */
  --paper:#f5f2ec;
  --paper-sunk:#eee9e0;
  --white:#ffffff;
  --hairline:#e4dfd6;
  --hairline-strong:#d3ccbf;
  --fog:#67637a;
  --slate:#55525e;
  --ink:#14121a;

  /* --- Cause: charity and community giving.
     The one hue outside the logo. It exists because charity lists are a different
     promise from a personal wishlist and must never be mistaken for one.
     Considered and rejected: Harvest Gold, the on-convention giving colour, which
     harmonises with the kraft tag but sits next to the Pending amber and keeps the
     giving area warm like everything else. See ui_kits/charity/palette-options.html. --- */
  --cause:#0b7a72;
  --cause-deep:#075c56;
  --cause-bright:#12a095;
  --cause-wash:#e4f4f2;
  /* The giving area's own ground and chrome. Every other surface in this product is warm
     paper; this one is cool. That temperature flip is the strongest signal we have that a
     giver has left the consumer product and is looking at a nonprofit's list. */
  --cause-canvas:#e7f0ef;
  --cause-ink:#04332f;
  --cause-ink-soft:#0a4a44;

  /* --- Semantic status --- */
  --claimed:#1f7a4c;
  --claimed-wash:#e7f4ec;
  --pending:#b07407;
  --pending-wash:#fdf3e1;

  /* --- Semantic aliases: use these in components --- */
  --surface-page:var(--paper);
  --surface-card:var(--white);
  --surface-sunk:var(--paper-sunk);
  --surface-tag:var(--kraft);
  --surface-invert:var(--ink);

  --text-heading:var(--ink);
  --text-body:var(--slate);
  --text-muted:var(--fog);
  --text-invert:var(--white);
  --text-link:var(--ribbon-blue);
  --text-price:var(--ink);

  --border-default:var(--hairline);
  --border-strong:var(--hairline-strong);
  --border-focus:var(--ribbon-blue);
  --border-tag:var(--twine);

  --action-primary:var(--ribbon-blue);
  --action-primary-hover:var(--ribbon-blue-deep);
  --action-primary-text:var(--white);
  --action-danger:var(--ribbon-red);
  --action-danger-hover:var(--ribbon-red-deep);

  --accent-priority:var(--ribbon-red);
  --accent-priority-wash:var(--ribbon-red-wash);
  --accent-group:var(--ribbon-violet);
  --accent-group-wash:var(--ribbon-violet-wash);
  --accent-success:var(--claimed);
  --accent-success-wash:var(--claimed-wash);
  --accent-cause:var(--cause);
  --accent-cause-bright:var(--cause-bright);
  --accent-cause-wash:var(--cause-wash);
  --surface-cause-page:var(--cause-canvas);
  --surface-cause-chrome:var(--cause-ink);

  --action-cause:var(--cause);
  --action-cause-hover:var(--cause-deep);
}

/* --- Classroom: "Pencil". Classroom lists sit in the giving area but read as school, not
   nonprofit: navy band, burnt-orange action, pencil-yellow meters. --class-bright is for bars
   and numerals on the navy band only; it fails contrast as text on light grounds. Close to
   --pending amber, so never put a Pending badge on a classroom card. --- */
:root{
  --class:#b45309;
  --class-deep:#8f4207;
  --class-bright:#f2a900;
  --class-wash:#fdf1d8;
  --class-canvas:#f6f2e8;
  --class-ink:#1f2a44;
}
/* Wrap any classroom surface in .mw-classroom. It remaps the giving-area tokens, so cause
   components (CauseItemCard, Button variant="cause", Badge tone="cause") pick up Pencil. */
.mw-classroom{
  --cause:var(--class);--cause-deep:var(--class-deep);--cause-bright:var(--class-bright);
  --cause-wash:var(--class-wash);--cause-canvas:var(--class-canvas);--cause-ink:var(--class-ink);
  --accent-cause:var(--class);--accent-cause-bright:var(--class-bright);--accent-cause-wash:var(--class-wash);
  --surface-cause-page:var(--class-canvas);--surface-cause-chrome:var(--class-ink);
  --action-cause:var(--class);--action-cause-hover:var(--class-deep);
  background:var(--class-canvas);
}

/* --- Forced colours (Windows high contrast). The system palette wins; the teal and Pencil
   bands stop being bands. What still carries meaning is redrawn in system colours: the
   chrome reads as a labelled strip, the active tab keeps a visible edge, actions keep a
   border, and links read as links. --- */
@media (forced-colors:active){
  .mw-cause-chrome{background:Canvas;color:CanvasText;border-bottom-color:CanvasText}
  .mw-cause-chrome a{color:LinkText}
  .mw-cause-chrome a[aria-current]{outline:1px solid LinkText}
  .mw-cause-chrome [data-variant]{border:1px solid ButtonBorder}
}

/* tokens/typography.css */
/* My Wishlist — typography.
   Outfit = display + headings (geometric, warm, tight).
   Inter  = every piece of UI and body copy.
   Roboto Mono = prices, quantities, countdowns, tokens — anything numeric that must align. */
:root{
  --font-display:"Outfit","Outfit Fallback",system-ui,sans-serif;
  --font-ui:"Inter","Inter Fallback",system-ui,-apple-system,sans-serif;
  --font-mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --weight-regular:400;
  --weight-bold:700;

  --size-display:56px;   --leading-display:1;      --tracking-display:-2.2px;
  --size-h1:40px;        --leading-h1:1.05;        --tracking-h1:-1.4px;
  --size-h2:32px;        --leading-h2:1.1;         --tracking-h2:-1px;
  --size-h3:24px;        --leading-h3:1.25;        --tracking-h3:-0.6px;
  --size-subhead:20px;   --leading-subhead:1.35;   --tracking-subhead:-0.3px;
  --size-body-lg:17px;   --leading-body-lg:1.55;   --tracking-body-lg:-0.1px;
  --size-body:15px;      --leading-body:1.55;      --tracking-body:-0.08px;
  --size-body-sm:14px;   --leading-body-sm:1.5;    --tracking-body-sm:0;
  --size-caption:12px;   --leading-caption:1.4;    --tracking-caption:0.2px;
  --size-micro:11px;     --leading-micro:1.3;      --tracking-micro:0.08em;

  --size-price-lg:22px;
  --size-price:16px;
}

/* tokens/spacing.css */
/* My Wishlist — 4px spacing ladder. Comfortable density: 16px inside chips, 20px inside cards, 64px between page sections. */
:root{
  --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;--space-24:96px;

  --page-max:1120px;
  --section-gap:64px;
  --card-padding:20px;
  --element-gap:12px;
  --grid-gutter:20px;
}

/* tokens/shape.css */
/* My Wishlist — shape & elevation.
   Elevation is carried by hairline borders and surface temperature, not shadow.
   The one shadow in the system lifts overlays (dialogs, toasts, popovers) off the page. */
:root{
  --radius-xs:6px;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-pill:999px;

  --radius-input:var(--radius-sm);
  --radius-button:var(--radius-pill);
  --radius-card:var(--radius-md);
  --radius-image:12px;
  --radius-badge:var(--radius-pill);

  --border-width:1px;
  --border-width-emphasis:1.5px;

  --shadow-none:none;
  --shadow-overlay:0 1px 2px rgba(20,18,26,.04),0 10px 32px rgba(20,18,26,.10);
  --shadow-lift:0 1px 2px rgba(20,18,26,.05),0 4px 12px rgba(20,18,26,.06);
  --focus-ring:0 0 0 3px color-mix(in oklab,var(--ribbon-blue) 28%,transparent);
}

/* tokens/motion.css */
/* My Wishlist — motion. Short, confident, no bounce. Claiming a gift should feel instant. */
:root{
  --duration-instant:90ms; /* @kind other */
  --duration-fast:140ms; /* @kind other */
  --duration-base:200ms; /* @kind other */
  --duration-slow:320ms; /* @kind other */
  --ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
  --ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */
  --press-scale:.97; /* @kind other */
}

/* tokens/base.css */
/* My Wishlist — minimal element defaults. Components carry their own styling. */
:root{color-scheme:light}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-ui);font-size:var(--size-body);line-height:var(--leading-body);letter-spacing:var(--tracking-body)}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-heading);font-weight:var(--weight-bold);margin:0}
h1{font-size:var(--size-h1);line-height:var(--leading-h1);letter-spacing:var(--tracking-h1)}
h2{font-size:var(--size-h2);line-height:var(--leading-h2);letter-spacing:var(--tracking-h2)}
h3{font-size:var(--size-h3);line-height:var(--leading-h3);letter-spacing:var(--tracking-h3)}
p{margin:0}
a{color:var(--text-link);text-decoration:none;transition:color var(--duration-fast) var(--ease-out)}
a:hover{color:var(--ribbon-blue-deep);text-decoration:underline;text-underline-offset:3px}
*,*::before,*::after{box-sizing:border-box}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
/* Shared component animations: Button's loading glyph, Skeleton's shimmer, Dialog/Toast entry. */
@keyframes mw-spin{to{transform:rotate(360deg)}}
@keyframes mw-shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes mw-rise{from{opacity:0;transform:translateY(6px)}}
/* Honour the system setting. Nothing in this product needs motion to be understood. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}