/* tokens.css holds every design token for Tsuzuku Manga, the only file allowed to contain raw color values */
/* palette name: dusk ink, a violet tinted charcoal base with muted darker pastel inks, see docs/design_system.md */

:root {
  /* ===== base surfaces, darkest to lightest ===== */
  /* page background, a violet tinted charcoal instead of pure black */
  --color_ink: #16151c;
  /* surface one for dialogs, menus and the footer */
  --color_panel: #1e1d26;
  /* surface two for cards, list rows and inputs */
  --color_panel_raised: #282731;
  /* surface three for hover states and pressed controls */
  --color_panel_high: #33323e;
  /* borders and dividers, used sparingly */
  --color_rule: #45434f;

  /* ===== text levels ===== */
  /* main text, a soft lilac white */
  --color_paper: #ece7f2;
  /* secondary text such as meta lines */
  --color_muted: #aea9bc;
  /* tertiary text for hints, still AA on every surface */
  --color_faint: #9d98ad;
  /* text placed on pastel fills */
  --color_on_accent: #16151c;

  /* ===== primary accent ===== */
  /* seal rose, the faded hanko stamp color and the one main accent */
  --color_rose: #d9949f;
  /* pressed and hover state of the primary accent */
  --color_rose_deep: #c27f8b;

  /* ===== secondary darker pastels, each with a meaning ===== */
  /* lavender marks plan to read and genre tags */
  --color_lavender: #ab9fde;
  /* periwinkle marks reading, information and links */
  --color_periwinkle: #90abe0;
  /* sage marks completed and success */
  --color_sage: #95c1a2;
  /* teal marks live activity and on hold */
  --color_teal: #82c2bc;
  /* honey marks premium and spoiler warnings */
  --color_honey: #dbb771;
  /* coral marks errors and dropped */
  --color_coral: #e8a386;

  /* ===== premium accent themes, each with a pressed shade ===== */
  /* pressed lavender */
  --color_lavender_deep: #978ac9;
  /* pressed teal */
  --color_teal_deep: #6eaea8;
  /* pressed honey */
  --color_honey_deep: #c7a35e;
  /* mauve cherry blossom accent */
  --color_sakura: #d7a2c4;
  /* pressed sakura */
  --color_sakura_deep: #c28db0;

  /* ===== tints for soft backgrounds behind the pastels ===== */
  /* rose wash for selected rows */
  --tint_rose: rgba(217, 148, 159, 0.14);
  /* stronger rose wash for hover on selected rows */
  --tint_rose_strong: rgba(217, 148, 159, 0.24);
  /* lavender wash for tags */
  --tint_lavender: rgba(171, 159, 222, 0.14);
  /* periwinkle wash for info boxes */
  --tint_periwinkle: rgba(144, 171, 224, 0.14);
  /* sage wash for success boxes */
  --tint_sage: rgba(149, 193, 162, 0.14);
  /* teal wash for live notes */
  --tint_teal: rgba(130, 194, 188, 0.14);
  /* honey wash for spoiler and premium boxes */
  --tint_honey: rgba(219, 183, 113, 0.14);
  /* coral wash for error boxes */
  --tint_coral: rgba(232, 163, 134, 0.14);
  /* faint light wash for quiet buttons */
  --tint_paper: rgba(236, 231, 242, 0.08);
  /* slightly stronger light wash for quiet button hover */
  --tint_paper_strong: rgba(236, 231, 242, 0.14);
  /* hairline outline on images */
  --tint_outline: rgba(236, 231, 242, 0.08);
  /* faint ink wash for controls on paper surfaces like Inko's speech bubble */
  --tint_ink: rgba(22, 21, 28, 0.08);
  /* stronger ink wash for hovered controls on paper */
  --tint_ink_strong: rgba(22, 21, 28, 0.14);

  /* ===== scrims and overlays ===== */
  /* nav bar and reader bar background once scrolled */
  --scrim_bar: rgba(22, 21, 28, 0.88);
  /* top fade behind the nav before scrolling */
  --scrim_top: rgba(22, 21, 28, 0.85);
  /* dialog backdrop */
  --scrim_backdrop: rgba(12, 11, 16, 0.72);
  /* strong left fade in the hero */
  --scrim_hero_strong: rgba(22, 21, 28, 0.94);
  /* middle of the hero fade */
  --scrim_hero_mid: rgba(22, 21, 28, 0.6);
  /* light end of the hero fade */
  --scrim_hero_soft: rgba(22, 21, 28, 0.2);
  /* screentone dot color in the hero */
  --scrim_dots: rgba(12, 11, 16, 0.5);
  /* fully clear version of the base, for gradient ends */
  --scrim_clear: rgba(22, 21, 28, 0);
  /* dark chip behind text on images */
  --scrim_chip: rgba(22, 21, 28, 0.72);

  /* ===== third party brand marks, used only as small edges ===== */
  /* Spotify green edge on song buttons */
  --brand_spotify: #1db954;
  /* YouTube red edge on song buttons */
  --brand_youtube: #ff4e45;

  /* ===== typography ===== */
  /* display face for titles and the wordmark */
  --font_display: "Dela Gothic One", "Hiragino Kaku Gothic Pro", sans-serif;
  /* body face for everything else */
  --font_body: "Zen Kaku Gothic New", "Segoe UI", system-ui, sans-serif;
  /* small meta text */
  --text_xs: 12px;
  /* captions and secondary lines */
  --text_sm: 13px;
  /* compact body text */
  --text_md: 14px;
  /* default body text */
  --text_base: 16px;
  /* lead paragraphs */
  --text_lg: 18px;
  /* section titles */
  --text_xl: 22px;
  /* dialog titles */
  --text_2xl: 28px;
  /* hero title, fluid */
  --text_hero: clamp(34px, 4.6vw, 68px);
  /* tight leading for display type */
  --leading_tight: 1.06;
  /* leading for short text blocks */
  --leading_snug: 1.35;
  /* leading for body text */
  --leading_body: 1.6;

  /* ===== spacing scale, a 4 pixel rhythm ===== */
  /* hairline gaps */
  --space_1: 4px;
  /* tight gaps */
  --space_2: 8px;
  /* compact padding */
  --space_3: 12px;
  /* default padding */
  --space_4: 16px;
  /* roomy padding */
  --space_5: 24px;
  /* section padding */
  --space_6: 32px;
  /* large section gaps */
  --space_7: 48px;
  /* hero scale gaps */
  --space_8: 64px;
  /* side padding of the page */
  --gutter: clamp(16px, 4vw, 56px);
  /* width of one cover card */
  --card_width: clamp(124px, 13vw, 180px);

  /* ===== radii, nested shapes follow outer equals inner plus padding ===== */
  /* chips inside cards and small images */
  --radius_xs: 4px;
  /* inputs, buttons and small cards */
  --radius_sm: 8px;
  /* cover cards and list rows */
  --radius_md: 12px;
  /* panels and popovers */
  --radius_lg: 16px;
  /* dialogs */
  --radius_xl: 20px;
  /* pills and round chips */
  --radius_pill: 999px;

  /* ===== shadows, layered and soft instead of hard borders ===== */
  /* resting cards */
  --shadow_sm: 0 1px 2px rgba(8, 7, 12, 0.4), 0 2px 6px rgba(8, 7, 12, 0.25);
  /* lifted cards on hover */
  --shadow_md: 0 6px 14px rgba(8, 7, 12, 0.4), 0 14px 30px rgba(8, 7, 12, 0.3);
  /* menus, popovers and dialogs */
  --shadow_lg: 0 18px 40px rgba(8, 7, 12, 0.5), 0 40px 90px rgba(8, 7, 12, 0.4);

  /* ===== motion ===== */
  /* micro interactions like presses and hovers */
  --duration_fast: 150ms;
  /* standard UI changes like tabs and toasts */
  --duration_base: 200ms;
  /* dialogs, sheets and reveals */
  --duration_slow: 280ms;
  /* entrances and exits, strong ease out */
  --ease_out: cubic-bezier(0.23, 1, 0.32, 1);
  /* elements moving while on screen */
  --ease_in_out: cubic-bezier(0.645, 0.045, 0.355, 1);
  /* hover and color changes */
  --ease_hover: ease;
  /* delay step between staggered cards */
  --stagger_step: 40ms;

  /* ===== layering scale ===== */
  /* content above the hero backdrop */
  --layer_content: 2;
  /* sticky nav */
  --layer_nav: 30;
  /* full screen reader */
  --layer_reader: 60;
  /* toasts above everything */
  --layer_toast: 90;

  /* ===== compatibility names used across older stylesheets and JavaScript ===== */
  /* page background */
  --ink: var(--color_ink);
  /* surface one */
  --panel: var(--color_panel);
  /* surface two */
  --panel_raised: var(--color_panel_raised);
  /* borders */
  --rule: var(--color_rule);
  /* main accent, premium themes override this one at runtime */
  --seal: var(--color_rose);
  /* pressed main accent, premium themes override this one too */
  --seal_deep: var(--color_rose_deep);
  /* main text */
  --paper: var(--color_paper);
  /* secondary text */
  --muted: var(--color_muted);
  /* small radius */
  --radius_small: var(--radius_sm);
  /* large radius */
  --radius_large: var(--radius_xl);
}