/* AkatronPC brand tokens. The brand kit (../brand/) documents every value here; change them together.
   Two surfaces: .night (cinematic: hero, story, form, footer) and .day (reading). [data-theme=dark] turns .day into night. */

@font-face {
  font-family: 'Mona Sans'; font-style: normal; font-weight: 200 900; font-stretch: 75% 125%; font-display: swap;
  src: url('fonts/mona-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mona Sans'; font-style: normal; font-weight: 200 900; font-stretch: 75% 125%; font-display: swap;
  src: url('fonts/mona-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* palette: purple is the machine and the action, teal is the signal between screen and machine */
  --mor: #7B2EFF;
  --mor-isik: #B99BFF;
  --mor-derin: #4C17B5;
  --mor-sis: #EEE8FF;
  --sinyal: #19D3C5;
  --sinyal-koyu: #0A7C75;
  --sinyal-sis: #D9F6F2;
  --gece: #100B1D;
  --gece-2: #1A142C;
  --gece-3: #261E3F;
  --porselen: #F2F0F7;
  --porselen-2: #E7E4F0;
  --beyaz: #FFFFFF;
  --murekkep: #16112A;
  --murekkep-2: #5B556F;
  --akatron: #02B350; /* the parent studio's green: only the 'Crafted by' badge */
  --kehribar: #F0A93B;
  --mercan: #EF5A5F;

  --font: 'Mona Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --wide: 112%;

  /* corners: small steps, never pills on buttons */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 32px;

  --ease: cubic-bezier(.22, .8, .24, 1);
  --ease-io: cubic-bezier(.65, 0, .25, 1);

  --rail-space: 0px; /* legacy: story.css still reads it; drop together with that file */
  --gutter: 20px;
}
@media (min-width: 1024px) { :root { --gutter: 40px; } }

.day {
  --bg: var(--porselen);
  --card: var(--beyaz);
  --card-2: var(--porselen-2);
  --text: var(--murekkep);
  --muted: var(--murekkep-2);
  --line: rgb(22 17 42 / .10);
  --line-2: rgb(22 17 42 / .18);
  --accent-text: var(--mor);
  --signal: var(--sinyal-koyu);
  --tile: var(--mor-sis);
  --tile-ink: var(--mor-derin);
  /* icon tiles: purple and teal, with a border so they hold on the porcelain surface */
  --ic-bg: #E2D6FF; --ic-ink: #4C17B5; --ic-line: rgb(123 46 255 / .5);
  --ic2-bg: #BFF0EA; --ic2-ink: #075E59; --ic2-line: rgb(10 124 117 / .5);
  --field: rgb(22 17 42 / .05);
  --shadow-1: 0 1px 1px rgb(22 17 42 / .03), 0 10px 26px -12px rgb(22 17 42 / .14);
  --shadow-2: 0 2px 4px rgb(22 17 42 / .04), 0 28px 64px -24px rgb(36 18 84 / .28);
  --ok: var(--sinyal-koyu);
  --warn: #A96A08;
  --bad: #C22F35;
  color-scheme: light;
}
.night, [data-theme='dark'] .day {
  --bg: var(--gece);
  --card: var(--gece-2);
  --card-2: var(--gece-3);
  --text: #F6F3FC;
  --muted: #AAA3C0;
  --line: rgb(255 255 255 / .10);
  --line-2: rgb(255 255 255 / .20);
  --accent-text: var(--mor-isik);
  --signal: var(--sinyal);
  --tile: rgb(123 46 255 / .22);
  --tile-ink: var(--mor-isik);
  --ic-bg: #2B1B57; --ic-ink: var(--mor-isik); --ic-line: rgb(185 155 255 / .45);
  --ic2-bg: #0F3A3B; --ic2-ink: #5FE6DA; --ic2-line: rgb(25 211 197 / .5);
  --field: rgb(255 255 255 / .07);
  --shadow-1: 0 1px 0 rgb(255 255 255 / .05) inset, 0 12px 28px -14px rgb(0 0 0 / .6);
  --shadow-2: 0 1px 0 rgb(255 255 255 / .06) inset, 0 34px 70px -28px rgb(0 0 0 / .75);
  --ok: var(--sinyal);
  --warn: var(--kehribar);
  --bad: var(--mercan);
  color-scheme: dark;
}