/* createmedia platform: design tokens.
   THE MARK, carried into the signed-in product: paper, forest, gold, ink.
   Light paper for creators and brands. A night ground for a site with its own gate
   (put data-surface="admin" on <html>) so it is unmistakably a different room. */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..800&family=Newsreader:ital,opsz,wght@1,6..72,400&family=DM+Mono:wght@400;500&display=swap");

/* metric-matched fallbacks so text does not jump when the web fonts arrive */
@font-face { font-family: "Archivo fb"; src: local("Arial"), local("ArialMT"); font-weight: 100 599; size-adjust: 98.1%; ascent-override: 89.7%; descent-override: 21.4%; line-gap-override: 0%; }
@font-face { font-family: "Archivo fb"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 1000; size-adjust: 104%; ascent-override: 84%; descent-override: 20%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader fb"; src: local("Georgia"); size-adjust: 94.9%; ascent-override: 78%; descent-override: 27.4%; line-gap-override: 0%; }
@font-face { font-family: "Mono fb"; src: local("Courier New"); size-adjust: 100%; ascent-override: 99%; descent-override: 31%; }

:root {
  color-scheme: light;

  /* grounds */
  --bg: #F3EEE3;            /* paper */
  --surface: #FBF8F1;       /* cards, tables */
  --surface-2: #E9E2D2;     /* quiet fills, table header, hover */
  --line: #D6CCB8;          /* hairlines */
  --line-strong: #0E1A14;   /* the ink rule under a statement head */

  /* ink */
  --text: #0E1A14;
  --muted: #4A554D;

  /* forest and gold */
  --veld: #1E4D35;          /* primary buttons, nav, links */
  --veld-deep: #163B28;
  --veld-band: #0B2A1D;     /* sidebar */
  --on-veld: #F3EEE3;
  --rand: #FFC93C;          /* the single key figure and the key action per screen */
  --rand-deep: #E0A21A;
  --on-gold: #0E1A14;
  --rand-text: #6E4B00;     /* gold-toned text on paper */

  /* states */
  --clay: #9C3A24;          /* errors, rejections, risk flags */
  --ok: #1F6B43;            /* positive */
  --warn: #8A5A00;          /* waiting, hold */
  --clay-tint: rgba(156, 58, 36, .09);
  --ok-tint: rgba(31, 107, 67, .10);
  --warn-tint: rgba(138, 90, 0, .10);
  --info-tint: rgba(30, 77, 53, .08);
  --neutral-tint: rgba(14, 26, 20, .05);

  /* roles */
  --link: var(--veld);
  --ring: #0E1A14;
  --btn-bg: var(--veld);
  --btn-bg-hover: var(--veld-deep);
  --btn-fg: var(--on-veld);
  --field-bg: #FFFDF8;
  --field-line: #8F8773;    /* the edge of an input: 3:1 against paper, stronger than a hairline */
  --check: var(--veld);     /* a ticked box, a chosen radio */
  --check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.4l3 3 6-6.6' fill='none' stroke='%23F3EEE3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chart: var(--veld);
  --chart-grid: rgba(14, 26, 20, .14);
  --backdrop: rgba(14, 26, 20, .55);
  --shadow-modal: 0 24px 60px rgba(14, 26, 20, .28), 0 2px 6px rgba(14, 26, 20, .12);

  /* app chrome */
  --side-bg: var(--veld-band);
  --side-fg: #F3EEE3;
  --side-muted: #A8BCAE;
  --side-line: rgba(243, 238, 227, .14);
  --side-active: rgba(243, 238, 227, .09);
  --bar-bg: #0E1A14;
  --bar-fg: #F3EEE3;
  --bar-muted: #AEB9B0;
  --bar-line: rgba(243, 238, 227, .22);

  /* type */
  --f-sans: Archivo, "Archivo fb", Arial, sans-serif;
  --f-serif: Newsreader, "Newsreader fb", Georgia, serif;
  --f-mono: "DM Mono", "Mono fb", "Courier New", monospace;
  --t-xs: 12px;
  --t-sm: 13.5px;
  --t-base: 15px;
  --t-md: 17px;
  --t-lg: 21px;
  --t-xl: 30px;
  --t-fig: 36px;
  --track-label: .08em;

  /* shape and space */
  --radius: 6px;
  --radius-chip: 999px;
  --hit: 40px;              /* control height; 44px on phones */
  --gap: 16px;
  --pad: 18px;
  --side-w: 248px;
  --pv-h: 0px;              /* height of anything pinned above the app. Nothing is, so it is 0; layout sums still use it */
  --tab-h: 62px;
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* banknote engraving, used once per screen at most (the gold tile, the guide cover) */
  --guilloche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='60'%3E%3Cg fill='none' stroke='%230E1A14' stroke-opacity='.11'%3E%3Cpath d='M-110 30q27.5-22 55 0t55 0 55 0 55 0 55 0 55 0'/%3E%3Cpath d='M-110 30q27.5-22 55 0t55 0 55 0 55 0 55 0 55 0' transform='translate(18.3 0)'/%3E%3Cpath d='M-110 30q27.5-22 55 0t55 0 55 0 55 0 55 0 55 0' transform='translate(36.7 0)'/%3E%3Cpath d='M-110 30q27.5-14 55 0t55 0 55 0 55 0 55 0 55 0' transform='translate(9.2 0)'/%3E%3Cpath d='M-110 30q27.5-14 55 0t55 0 55 0 55 0 55 0 55 0' transform='translate(27.5 0)'/%3E%3Cpath d='M-110 30q27.5-14 55 0t55 0 55 0 55 0 55 0 55 0' transform='translate(45.8 0)'/%3E%3C/g%3E%3C/svg%3E");
  --guilloche-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='60'%3E%3Cg fill='none' stroke='%231E4D35' stroke-opacity='.07'%3E%3Cpath d='M-110 30q27.5-22 55 0t55 0 55 0 55 0 55 0 55 0'/%3E%3Cpath d='M-110 30q27.5-22 55 0t55 0 55 0 55 0 55 0 55 0' transform='translate(18.3 0)'/%3E%3Cpath d='M-110 30q27.5-22 55 0t55 0 55 0 55 0 55 0 55 0' transform='translate(36.7 0)'/%3E%3Cpath d='M-110 30q27.5-14 55 0t55 0 55 0 55 0 55 0 55 0' transform='translate(9.2 0)'/%3E%3Cpath d='M-110 30q27.5-14 55 0t55 0 55 0 55 0 55 0 55 0' transform='translate(27.5 0)'/%3E%3Cpath d='M-110 30q27.5-14 55 0t55 0 55 0 55 0 55 0 55 0' transform='translate(45.8 0)'/%3E%3C/g%3E%3C/svg%3E");
}

/* a site with its own gate: night */
html[data-surface="admin"] {
  color-scheme: dark;
  --bg: #0A1712;
  --surface: #10231B;
  --surface-2: #173226;
  --line: #2C5446;
  --line-strong: #F3EEE3;
  --text: #F3EEE3;
  --muted: #A8BCAE;
  --rand-text: #FFC93C;
  --clay: #E7907A;
  --ok: #7FD3A2;
  --warn: #F2C25B;
  --clay-tint: rgba(231, 144, 122, .13);
  --ok-tint: rgba(127, 211, 162, .12);
  --warn-tint: rgba(242, 194, 91, .12);
  --info-tint: rgba(168, 188, 174, .12);
  --neutral-tint: rgba(243, 238, 227, .07);
  --link: #9ADBB8;
  --ring: #FFC93C;
  --btn-bg: #F3EEE3;
  --btn-bg-hover: #FFFFFF;
  --btn-fg: #0E1A14;
  --field-bg: #0C1D16;
  --field-line: #4E7B68;
  --check: var(--rand);
  --check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.4l3 3 6-6.6' fill='none' stroke='%230E1A14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chart: #7FD3A2;
  --chart-grid: rgba(243, 238, 227, .16);
  --backdrop: rgba(3, 8, 6, .72);
  --shadow-modal: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px #2C5446;
  --side-bg: #06100C;
  --side-fg: #F3EEE3;
  --side-muted: #A8BCAE;
  --side-line: rgba(243, 238, 227, .12);
  --side-active: rgba(255, 201, 60, .10);
  --bar-bg: #030806;
  --bar-line: rgba(243, 238, 227, .2);
  --guilloche-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='60'%3E%3Cg fill='none' stroke='%23F3EEE3' stroke-opacity='.05'%3E%3Cpath d='M-110 30q27.5-22 55 0t55 0 55 0 55 0 55 0 55 0'/%3E%3Cpath d='M-110 30q27.5-22 55 0t55 0 55 0 55 0 55 0 55 0' transform='translate(18.3 0)'/%3E%3Cpath d='M-110 30q27.5-22 55 0t55 0 55 0 55 0 55 0 55 0' transform='translate(36.7 0)'/%3E%3Cpath d='M-110 30q27.5-14 55 0t55 0 55 0 55 0 55 0 55 0' transform='translate(9.2 0)'/%3E%3Cpath d='M-110 30q27.5-14 55 0t55 0 55 0 55 0 55 0 55 0' transform='translate(27.5 0)'/%3E%3Cpath d='M-110 30q27.5-14 55 0t55 0 55 0 55 0 55 0 55 0' transform='translate(45.8 0)'/%3E%3C/g%3E%3C/svg%3E");
}

@media (max-width: 760px) {
  :root {
    --hit: 44px;
    --t-xl: 26px;
    --t-fig: 32px;
    --pad: 16px;
  }
}