/**
 * File: tokens.css
 * Description: Shared design tokens
 * @version 1.0.0
 */

/* =========================================
   DESIGN TOKENS
   ========================================= */

   :root {
    /* Layout */
    --layout-max-width: 1900px;
    --layout-header-height: 60px;
    --layout-sidebar-width: 320px;
    --layout-content-padding: 20px;

    /* Typography */
    --font-size-base: 15px;
    --font-size-sidebar: 15px;

    /* Text */
    --color-text: #111111;
    --color-text-muted: #888888;
    --color-text-subtle: #cccccc;
    --color-text-header: #111111;

    /* Surfaces */
    --color-surface: #ffffff;
    --color-surface-muted: #f8f8f8;
    --color-surface-subtle: #eaeaea;
    --color-surface-header: #ffffff;
    --color-surface-sidebar: #ffffff;

    /* Accent */
    --color-accent-primary: #111111;
    --color-accent-secondary: #b45d32;
    --color-info: #496c62;
    --color-highlight: #e8d9ae;

    /* States */
    --color-surface-selected: rgba(0, 0, 0, 0.04);

    /* Borders */
    --color-border: #111111;
    --color-border-muted: #dddddd;

    /* Overlay */
    --color-overlay: rgba(0, 0, 0, 0.4);

    /* Pattern */
    --color-dot: #cccccc;
    --color-dot-dark: #555555;
    --color-dot-surface: var(--color-surface-subtle);
    --color-dot-surface-dark: #111111;
  }


/* =========================================
   RESPONSIVE TOKENS
   ========================================= */

@media (min-width: 768px) {
  :root {
    --layout-header-height: 80px;
    --layout-content-padding: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --layout-sidebar-width: 300px;
  }
}

@media (min-width: 1366px) {
  :root {
    --layout-sidebar-width: 320px;
    --layout-content-padding: 32px;

    --font-size-base: 16px;
    --font-size-sidebar: 16px;
  }
}