:root {
    /* Fonts */
    --font-body: "Montserrat", sans-serif;
    --font-title: "Montserrat", sans-serif;
    --font-subtitle: "Montserrat", sans-serif;
    --font-link: "Montserrat", sans-serif;
    --font-button: "Montserrat", sans-serif;

    --xsmall-font-size: 12px;
    --small-font-size: 13px;
    --normal-font-size: 15px;    
    --medium-font-size: 16px;
    --large-font-size: 19px;

    --xsmall-line-height: 14px;
    --small-line-height: 16px;
    --normal-line-height: 19px;
    --large-line-height: 24px;

    /* Colors */
    --color-body: #000;
    --color-title: #000;

    --color-white: #fff;
    --color-black: #000;

    --color-link: #000;
    --color-link-hover: #000;
    --color-link-active: #000;   

    --color-danger: #d2232a;
    --color-danger-hover: #b21a21; 
    --color-danger-active: #8e151b; 

    --color-success: #15803d;
    --color-success-hover: #166534;
    --color-success-active: #14532d;

    --color-global-grey: #5B5B5B;

    --border-color: #ddd;

    --bg-white: #fff;
    --bg-black: #000;

    /* UI colors */

    /* Mastrant */

    --color-mastrant-1: #d2232a;
    --color-mastrant-2: #0e548b;
    --color-mastrant-3: #6c757d;
    
    --bg-mastrant-grey: #F8F9FA;

    --color-mastrant-btn: #000;;
    --color-mastrant-btn-hover: #5B5B5B;
    --color-mastrant-btn-active: #000;

    --color-mastrant-btn-primary: #d2232a;
    --color-mastrant-btn-primary-hover: #b21a21;
    --color-mastrant-btn-primary-active: #8e151b;

    --color-mastrant-btn-secondary: #0e548b;
    --color-mastrant-btn-secondary-hover: #0b4574;
    --color-mastrant-btn-secondary-active: #08365b;

    --color-primary: #008000;

    

    --bg-html: #f5f5f5;
    --bg-transparent: transparent;

    /* radius */
    --radius-xsmall: 6px;
    --radius-small: 8px;
    --radius-xmedium: 15px;
    --radius-medium: 20px;
    --radius-large: 30px;
    --radius-xlarge: 60px;

    /* claude */

    /* Brand */
    --color-primary-50:  #e8f1f8;
    --color-primary-100: #c8def0;
    --color-primary-200: #9dc3e1;
    --color-primary-300: #69a3d3;
    --color-primary-400: #2d83c2;
    --color-primary-500: #0e548b;  /* base */
    --color-primary-600: #0b4574;
    --color-primary-700: #08365b;
    --color-primary-800: #062744;
    --color-primary-900: #04192d;

    --color-accent-50:  #fbe9ea;
    --color-accent-100: #f6c2c5;
    --color-accent-200: #ed9598;
    --color-accent-300: #df6065;
    --color-accent-400: #d23b41;
    --color-accent-500: #d2232a;  /* base */
    --color-accent-600: #b21a21;
    --color-accent-700: #8e151b;
    --color-accent-800: #6b1014;
    --color-accent-900: #470a0d;

    /* Semantic */
    --color-success-50:  #f0fdf4;
    --color-success-100: #dcfce7;
    --color-success-200: #bbf7d0;
    --color-success-500: #22c55e;
    --color-success-600: #16a34a;
    --color-success-700: #15803d;  /* base */
    --color-success-900: #14532d;

    --color-warning-50:  #fffbeb;
    --color-warning-100: #fef3c7;
    --color-warning-200: #fde68a;
    --color-warning-500: #f59e0b;
    --color-warning-600: #d97706;  /* base */
    --color-warning-700: #b45309;
    --color-warning-900: #78350f;

    /* Aliasy — danger = accent red, info = primary blue */
    --color-danger-50:  var(--color-accent-50);
    --color-danger-200: var(--color-accent-200);
    --color-danger-500: var(--color-accent-500);
    --color-danger-700: var(--color-accent-700);
    --color-danger-900: var(--color-accent-800);

    --color-info-50:  var(--color-primary-50);
    --color-info-200: var(--color-primary-200);
    --color-info-500: var(--color-primary-500);
    --color-info-700: var(--color-primary-700);
    --color-info-900: var(--color-primary-800);

    /* Neutrals (slate) */
    --color-neutral-50:  #f8fafc;
    --color-neutral-100: #f1f5f9;
    --color-neutral-200: #e2e8f0;
    --color-neutral-300: #cbd5e1;
    --color-neutral-400: #94a3b8;
    --color-neutral-500: #64748b;
    --color-neutral-600: #475569;
    --color-neutral-700: #334155;
    --color-neutral-800: #1e293b;
    --color-neutral-900: #0f172a;

    /* Sémantické aliasy pro konkrétní použití */
    --bg-page:        var(--color-neutral-50);
    --bg-surface:     #ffffff;
    --bg-muted:       var(--color-neutral-100);
    --border-default: var(--color-neutral-200);
    --border-strong:  var(--color-neutral-300);
    --text-primary:   var(--color-neutral-900);
    --text-secondary: var(--color-neutral-600);
    --text-muted:     var(--color-neutral-400);
    --link:           var(--color-primary-500);
    --link-hover:     var(--color-primary-600);
}

@media (max-width: 639px) {
  :root {
    --xsmall-font-size: 12px;
    --small-font-size: 13px;
    --normal-font-size: 15px;    
    --large-font-size: 16px;

    --xsmall-line-height: 14px;
    --small-line-height: 16px;
    --normal-line-height: 19px;
    --large-line-height: 24px;
  }
}