/* DMM design tokens: the one source for every colour, button, radius, type size and space on deepmadesimple.com.
 * Mira (DMM), 21 Oct 2026. Luis: "consistency is one of our values ... We must have a styles sheet."
 * Values were read off the live /member page (computed styles, 21 Oct ~3:5x pm CT), and the primary button is its JOIN button exactly.
 * How to use: <link rel="stylesheet" href="/brand/tokens.css"> before the page's own <style>, then write var(--dmm-*) and the .dmm-btn classes, never a raw hex.
 * Light is the default, whatever the phone's setting (Luis, 21 Oct: pages load on white). Dark applies only with the toggle: <html data-theme="dark">.
 * The full guide is docs/design-system.md. */

:root {
  /* Colour: ground and text */
  --dmm-page: #ffffff;          /* the page ground */
  --dmm-surface: #ffffff;       /* cards sit on the page by shadow, never by an outline */
  --dmm-soft: #f4f4f5;          /* quiet fills: secondary buttons, chips, tabs, inputs */
  --dmm-line: #e4e4e4;          /* hairline dividers between sections; never an outline round a card */
  --dmm-text: #202124;          /* body text and headings */
  --dmm-text-2: #696969;        /* secondary text: meta, captions (5.5:1 on white) */
  --dmm-text-3: #595959;        /* small text at 14px (7:1 on white) */
  --dmm-on-dark: #ffffff;       /* text on navy or on a picture */

  /* Colour: brand */
  --dmm-navy: #1d2a44;          /* the D mark, the announcement bar, the Up next tile */
  --dmm-gold: #f8d481;          /* the primary button: /member's JOIN */
  --dmm-gold-hover: #f3c562;    /* JOIN on hover; also gold text on navy */
  --dmm-on-gold: #202124;       /* text on a gold button, both themes (11.3:1) */
  --dmm-marker: #fde68a;        /* the highlight under quoted phrases, lower 45% of the line */
  --dmm-success: #1e9e5a;       /* tick circles in the benefits list */
  --dmm-focus: #202124;         /* focus ring */

  /* Shape */
  --dmm-radius-button: 4px;     /* every button, as JOIN */
  --dmm-radius-field: 8px;      /* inputs, small tiles */
  --dmm-radius-card: 12px;      /* cards, panels, pictures */
  --dmm-radius-pill: 999px;     /* chips and toggles only (rating marks, filters) */

  /* Elevation */
  --dmm-shadow-card: 0 1px 2px rgba(60, 64, 67, .12);
  --dmm-shadow-button: 0 1px 2px rgba(60, 64, 67, .32);
  --dmm-shadow-raised: 0 4px 12px rgba(60, 64, 67, .28);

  /* Type: Inter 400 / 500 / 700. Size / line height. Nothing under 14px. */
  --dmm-font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --dmm-text-xs: 14px;  --dmm-lh-xs: 20px;   /* small print, meta */
  --dmm-text-sm: 15px;  --dmm-lh-sm: 22px;   /* buttons in bars, captions */
  --dmm-text-md: 16px;  --dmm-lh-md: 24px;   /* body, buttons */
  --dmm-text-lg: 18px;  --dmm-lh-lg: 28px;   /* reading text (scripts, long copy) */
  --dmm-text-xl: 20px;  --dmm-lh-xl: 30px;   /* section headings, page title on a phone */
  --dmm-text-2xl: 24px; --dmm-lh-2xl: 32px;  /* page title at 768px and up */
  --dmm-text-3xl: 32px; --dmm-lh-3xl: 40px;  /* a landing headline, one per page at most */

  /* Space: a 4px base. Gaps and padding use only these. */
  --dmm-space-1: 4px;
  --dmm-space-2: 8px;
  --dmm-space-3: 12px;
  --dmm-space-4: 16px;   /* the phone's side gutter */
  --dmm-space-5: 20px;
  --dmm-space-6: 24px;
  --dmm-space-8: 32px;   /* between sections on a phone */
  --dmm-space-12: 48px;  /* between sections at 768px and up */
  --dmm-space-16: 64px;

  /* Sizes */
  --dmm-tap: 44px;              /* smallest tap target */
  --dmm-button-h: 48px;         /* every button's height; .dmm-btn-sm is 44px for bars */
  --dmm-measure: 680px;         /* longest reading line */

  /* Card-brand row under "Secure checkout" (simple-icons 16.34.0, CC0, Vera's ruling): every mark the same size and one grey */
  --dmm-cardmark-size: 28px;    /* width and height of each mark, as live on /member */
  --dmm-cardmark-color: var(--dmm-text-2); /* #696969 light, #a9adb3 dark: follows the toggle */
}

/* Dark, only when the person turns it on with the toggle */
:root[data-theme="dark"] {
  --dmm-page: #121316;
  --dmm-surface: #1c1d21;
  --dmm-soft: #27292e;
  --dmm-line: #33353a;
  --dmm-text: #e8eaed;
  --dmm-text-2: #a9adb3;
  --dmm-text-3: #a9adb3;
  --dmm-marker: rgba(253, 230, 138, .35);
  --dmm-focus: #e8eaed;
  --dmm-shadow-card: none;
  color-scheme: dark;
}

/* Buttons. One shape, three weights. Use the primary once per screen. */
.dmm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--dmm-space-2);
  min-height: var(--dmm-button-h); padding: 0 var(--dmm-space-5);
  border: 0; border-radius: var(--dmm-radius-button);
  font: 700 var(--dmm-text-md)/var(--dmm-lh-md) var(--dmm-font);
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.dmm-btn:focus-visible { outline: 2px solid var(--dmm-focus); outline-offset: 3px; }
.dmm-btn[disabled], .dmm-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* Primary: /member's JOIN, exactly. Gold on both themes; its dark text holds 11:1. */
.dmm-btn-primary { background: var(--dmm-gold); color: var(--dmm-on-gold); box-shadow: var(--dmm-shadow-button); }
.dmm-btn-primary:hover { background: var(--dmm-gold-hover); box-shadow: var(--dmm-shadow-raised); }
.dmm-btn-primary:active { box-shadow: var(--dmm-shadow-button); }

/* Secondary: the quiet fill. For the second action beside a primary, or any action on a screen that has no primary. */
.dmm-btn-secondary { background: var(--dmm-soft); color: var(--dmm-text); }
.dmm-btn-secondary:hover { background: var(--dmm-line); }

/* Ghost: text only. For "Start over", "Watch again", "See more". */
.dmm-btn-ghost { background: transparent; color: var(--dmm-text); }
.dmm-btn-ghost:hover { background: var(--dmm-soft); }

.dmm-btn-block { display: flex; width: 100%; }
.dmm-btn-sm { min-height: var(--dmm-tap); font-size: var(--dmm-text-sm); line-height: var(--dmm-lh-sm); padding: 0 var(--dmm-space-4); } /* inside a bar or a dense row: 44px */

/* Text link inside copy */
.dmm-link { color: var(--dmm-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-weight: 700; }
.dmm-link:hover { text-decoration-thickness: 2px; }

/* Card: a surface lifted by shadow, never by an outline */
.dmm-card { background: var(--dmm-surface); border-radius: var(--dmm-radius-card); box-shadow: var(--dmm-shadow-card); padding: var(--dmm-space-4); }

/* Section divider: the hairline between two plain-text sections */
.dmm-rule { border: 0; border-top: 1px solid var(--dmm-line); margin: var(--dmm-space-8) 0; }

/* The highlight under a quoted phrase */
.dmm-mark { background: linear-gradient(transparent 55%, var(--dmm-marker) 55%); color: inherit; padding: 0 1px; }

/* Never italics on his text (Luis, 22 Oct 2026 ~9:5x pm CT: "never use italics on my text. NEVER."): the tags browsers slant by default come out upright. */
em, i, cite, dfn, var, address { font-style: normal; }

/* The header's LOG IN: a light grey outline button, the one outlined button on the site (Luis, 22 Oct 2026 ~9:5x pm CT:
   "login needs its light gray outline btn"). 40px drawn, 44px to tap; grey text at 7:1 on white. */
header.top .login {
  position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-height: 40px; padding: 0 16px; border: 1px solid #d4d4d8; border-radius: var(--dmm-radius-field); background: #fff;
  color: var(--dmm-text-3); font: 700 14px/20px var(--dmm-font); letter-spacing: .3px; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer; flex: none; align-self: center;
}
header.top .login::after { content: ""; position: absolute; inset: -2px 0; }
header.top .login:hover { background: var(--dmm-soft); border-color: #c4c4c8; color: var(--dmm-text); }
header.top .login:focus-visible { outline: 2px solid var(--dmm-focus); outline-offset: 2px; }
header.top .login[hidden] { display: none; }
/* The watch and series pages can be dark (Light / Dark / Auto): the same outline in a quiet grey on the dark header. */
:root[data-theme="dark"] header.top .login { background: transparent; border-color: #4a4d52; color: var(--dmm-text); }
:root[data-theme="dark"] header.top .login:hover { background: var(--dmm-soft); border-color: #5f6368; }