/*!
 * FrameBaseCSS Custom Theme Template v1.1.0
 * Copyright (c) 2026 IceWolf23X
 * Released under the MIT License.
 * https://github.com/IceWolf23X/FrameBaseCSS
 */

@import url("./framebase.css");

/*
==============================================================================
FRAMEBASECSS CUSTOM THEME TEMPLATE
==============================================================================
1. Copy this file and give the copy a theme-specific name.
2. Keep the import first and keep the renamed theme beside framebase.css.
3. Replace the values below; delete tokens that should inherit the base value.
4. Check text/background and action/on-action pairs for sufficient contrast.

This starter is valid CSS and initially reproduces the default dark theme.
FrameBaseCSS keeps its canonical accessible print palette automatically.
==============================================================================
*/

:root {
  /* Color scheme and semantic palette: review these for every custom theme. */
  --fb-color-scheme: dark;
  --fb-color-background: #2f3235;
  --fb-color-surface: #3a3e42;
  --fb-color-surface-alt: #464b50;
  --fb-color-surface-raised: #50565c;
  --fb-color-border: #697078;
  --fb-color-text-muted: #b8c0c7;
  --fb-color-text: #f3f6f8;
  --fb-color-primary: #35c6d4;
  --fb-color-primary-hover: #65d5df;
  --fb-color-on-primary: #172023;
  --fb-color-secondary: #0e96a6;
  --fb-color-info: #8feaf2;
  --fb-color-success: #45d16f;
  --fb-color-warning: #f0b84b;
  --fb-color-on-warning: #172023;
  --fb-color-danger: #f05b4f;
  --fb-color-danger-action: #a83f37;
  --fb-color-danger-action-hover: #c24b42;
  --fb-color-on-danger: #ffffff;
  --fb-color-code-background: #282b2e;
  --fb-color-backdrop: rgb(0 0 0 / 0.62);

  /* Typography: remove this group to retain the canonical type system. */
  --fb-font-mono:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;
  --fb-font-size-xs: 0.75rem;
  --fb-font-size-sm: 0.84rem;
  --fb-font-size-base: 0.94rem;
  --fb-font-size-md: 1.03rem;
  --fb-font-size-lg: 1.18rem;
  --fb-font-size-xl: clamp(1.45rem, 2vw, 1.9rem);
  --fb-font-size-2xl: clamp(2rem, 5vw, 3rem);
  --fb-font-size-3xl: clamp(2.5rem, 7vw, 4.5rem);
  --fb-line-height-tight: 1.25;
  --fb-line-height-base: 1.62;
  --fb-content-measure: 105ch;

  /* Spacing scale: keep the progression predictable when changing it. */
  --fb-space-1: 0.25rem;
  --fb-space-2: 0.5rem;
  --fb-space-3: 0.75rem;
  --fb-space-4: 1rem;
  --fb-space-5: 1.25rem;
  --fb-space-6: 1.5rem;
  --fb-space-8: 2rem;
  --fb-space-10: 2.5rem;
  --fb-space-12: 3rem;
  --fb-space-16: 4rem;

  /* Shape, depth, and motion. */
  --fb-radius-sm: 6px;
  --fb-radius-md: 7px;
  --fb-radius-lg: 8px;
  --fb-radius-pill: 999px;
  --fb-shadow-soft: 0 2px 10px rgb(0 0 0 / 0.14);
  --fb-shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.025);
  --fb-shadow-overlay: 0 10px 35px rgb(0 0 0 / 0.35);
  --fb-transition-fast: 140ms ease;

  /* Global dimensions: remove values that the project does not customize. */
  --fb-container-max: 1200px;
  --fb-content-max: 1560px;
  --fb-sidebar-width: clamp(220px, 19vw, 300px);
  --fb-toc-width: clamp(180px, 16vw, 260px);
  --fb-layout-gap: 1.25rem;
  --fb-page-padding: clamp(0.9rem, 2.5vw, 1.6rem);
  --fb-sticky-offset: 1rem;
  --fb-control-height: 2.5rem;
}

/* Keep muted text and boundaries distinct when stronger contrast is requested. */
@media (prefers-contrast: more) {
  :root {
    --fb-color-border: #9ea7af;
    --fb-color-text-muted: #d5dadd;
  }
}