/* =============================================================================
   SHC DESIGN SYSTEM — TOKENS
   Single source of truth for all visual properties.
   Based on Untitled UI + Bricks Builder variable system.
   Prefix: --shc-
   ============================================================================= */

:root {

    /* =========================================================================
      
       ========================================================================= */

    /* White */
    --shc-white: #FFFFFF;

    /* Gray (Neutral) */
    --shc-gray-25:  #FCFCFD;
    --shc-gray-50:  #F9FAFB;
    --shc-gray-100: #F2F4F7;
    --shc-gray-200: #E4E7EC;
    --shc-gray-300: #D0D5DD;
    --shc-gray-400: #98A2B3;
    --shc-gray-500: #667085;
    --shc-gray-600: #475467;
    --shc-gray-700: #344054;
    --shc-gray-800: #1D2939;
    --shc-gray-900: #101828;
    --shc-gray-950: #0C111D;

    /* Primary — Orange */
    --shc-primary-25:  #FEFAF5;
    --shc-primary-50:  #FEF6EE;
    --shc-primary-100: #FDEAD7;
    --shc-primary-200: #F9DBAF;
    --shc-primary-300: #F7B27A;
    --shc-primary-400: #F38744;
    --shc-primary-500: #EF6820;
    --shc-primary-600: #E04F16;
    --shc-primary-700: #B93815;
    --shc-primary-800: #932F19;
    --shc-primary-900: #772917;

    /* Success — Green */
    --shc-success-25:  #F6FEF9;
    --shc-success-50:  #ECFDF3;
    --shc-success-100: #D1FADF;
    --shc-success-200: #A6F4C5;
    --shc-success-300: #6CE9A6;
    --shc-success-400: #32D583;
    --shc-success-500: #12B76A;
    --shc-success-600: #039855;
    --shc-success-700: #027A48;

    /* Error — Red */
    --shc-error-25:  #FFFBFA;
    --shc-error-50:  #FEF3F2;
    --shc-error-100: #FEE4E2;
    --shc-error-200: #FECDCA;
    --shc-error-300: #FDA29B;
    --shc-error-400: #F97066;
    --shc-error-500: #F04438;
    --shc-error-600: #D92D20;
    --shc-error-700: #B42318;

    /* Warning — Orange/Yellow */
    --shc-warning-25:  #FFFCF5;
    --shc-warning-50:  #FFFAEB;
    --shc-warning-100: #FEF0C7;
    --shc-warning-200: #FEDF89;
    --shc-warning-300: #FEC84B;
    --shc-warning-400: #FDB022;
    --shc-warning-500: #F79009;
    --shc-warning-600: #DC6803;
    --shc-warning-700: #B54708;

    /* Blue (Info) */
    --shc-blue-25:  #F5FAFF;
    --shc-blue-50:  #EFF8FF;
    --shc-blue-100: #D1E9FF;
    --shc-blue-200: #B2DDFF;
    --shc-blue-300: #84CAFF;
    --shc-blue-400: #53B1FD;
    --shc-blue-500: #2E90FA;
    --shc-blue-600: #1570EF;
    --shc-blue-700: #175CD3;

    /* Purple (Accent) */
    --shc-purple-25:  #FAFAFF;
    --shc-purple-50:  #F4F3FF;
    --shc-purple-100: #EBE9FE;
    --shc-purple-200: #D9D6FE;
    --shc-purple-500: #6172F3;
    --shc-purple-700: #5925DC;

    /* Pink (Accent) */
    --shc-pink-500: #EE46BC;

    /* =========================================================================
       TYPOGRAPHY — from Bricks system
       ========================================================================= */

    /* Font families */
    --shc-font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --shc-font-mono: 'SF Mono', 'Consolas', 'Liberation Mono', Menlo, monospace;

    /* Text sizes (px — isolated from html font-size) */
    --shc-text-xs: 12px;
    --shc-text-sm: 14px;
    --shc-text-md: 16px;
    --shc-text-lg: 18px;
    --shc-text-xl: 20px;

    /* Display sizes */
    --shc-display-xs: 24px;
    --shc-display-sm: 30px;
    --shc-display-md: 36px;
    --shc-display-lg: 48px;
    --shc-display-xl: 60px;

    /* Line heights — text */
    --shc-leading-xs: 18px;
    --shc-leading-sm: 20px;
    --shc-leading-md: 24px;
    --shc-leading-lg: 28px;
    --shc-leading-xl: 30px;

    /* Line heights — display */
    --shc-leading-display-xs: 32px;
    --shc-leading-display-sm: 38px;
    --shc-leading-display-md: 44px;
    --shc-leading-display-lg: 60px;

    /* Font weights */
    --shc-font-regular:  400;
    --shc-font-medium:   500;
    --shc-font-semibold: 600;
    --shc-font-bold:     700;

    /* Letter spacing */
    --shc-tracking-tight:  -0.02em;
    --shc-tracking-normal: 0;

    /* =========================================================================
       SHADOWS — from Bricks system
       ========================================================================= */
    --shc-shadow-xs:  0px 1px 2px rgba(10, 13, 18, 0.05);
    --shc-shadow-sm:  0px 1px 3px rgba(10, 13, 18, 0.1), 0px 1px 2px -1px rgba(10, 13, 18, 0.1);
    --shc-shadow-md:  0px 4px 6px -1px rgba(10, 13, 18, 0.1), 0px 2px 4px -2px rgba(10, 13, 18, 0.06);
    --shc-shadow-lg:  0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03), 0px 2px 2px -1px rgba(10, 13, 18, 0.04);
    --shc-shadow-xl:  0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 8px 8px -4px rgba(10, 13, 18, 0.03), 0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
    --shc-shadow-2xl: 0px 24px 48px -12px rgba(10, 13, 18, 0.18), 0px 4px 4px -2px rgba(10, 13, 18, 0.04);
    --shc-shadow-3xl: 0px 32px 64px -12px rgba(10, 13, 18, 0.14), 0px 5px 5px -2.5px rgba(10, 13, 18, 0.04);

    /* Skeuomorphic shadow (for raised buttons) */
    --shc-shadow-xs-skeuomorphic: 0px 1px 2px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);

    /* =========================================================================
       FOCUS RINGS — from Bricks system
       ========================================================================= */
    --shc-focus-ring:               0px 0px 0px 2px #FFFFFF, 0px 0px 0px 4px var(--shc-primary-500);
    --shc-focus-ring-error:         0px 0px 0px 2px #FFFFFF, 0px 0px 0px 4px var(--shc-error-500);
    --shc-focus-ring-shadow-xs:     0px 1px 2px rgba(10, 13, 18, 0.05), 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 4px var(--shc-primary-500);
    --shc-focus-ring-shadow-sm:     0px 1px 3px rgba(10, 13, 18, 0.1), 0px 1px 2px rgba(10, 13, 18, 0.1), 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 4px var(--shc-primary-500);
    --shc-focus-ring-error-shadow-xs: 0px 1px 2px rgba(10, 13, 18, 0.05), 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 4px var(--shc-error-500);

    /* =========================================================================
       BACKDROP BLURS — from Bricks system
       ========================================================================= */
    --shc-blur-sm: blur(4px);
    --shc-blur-md: blur(8px);
    --shc-blur-lg: blur(12px);
    --shc-blur-xl: blur(20px);

    /* =========================================================================
       SPACING (px — isolated from html font-size)
       ========================================================================= */
    --shc-space-0:    0;
    --shc-space-0_5:  2px;
    --shc-space-1:    4px;
    --shc-space-1_5:  6px;
    --shc-space-2:    8px;
    --shc-space-2_5:  10px;
    --shc-space-3:    12px;
    --shc-space-3_5:  14px;
    --shc-space-4:    16px;
    --shc-space-4_5:  18px;
    --shc-space-5:    20px;
    --shc-space-6:    24px;
    --shc-space-7:    32px;
    --shc-space-8:    40px;
    --shc-space-9:    48px;
    --shc-space-10:   64px;
    --shc-space-11:   80px;
    --shc-space-12:   96px;

    /* =========================================================================
       BORDER RADIUS (px — isolated from html font-size)
       ========================================================================= */
    --shc-radius-none: 0;
    --shc-radius-xxs:  2px;
    --shc-radius-xs:   4px;
    --shc-radius-sm:   6px;
    --shc-radius-md:   8px;
    --shc-radius-lg:   10px;
    --shc-radius-xl:   12px;
    --shc-radius-2xl:  16px;
    --shc-radius-3xl:  20px;
    --shc-radius-4xl:  24px;
    --shc-radius-full: 9999px;

    /* =========================================================================
       WIDTHS (px — isolated from html font-size)
       ========================================================================= */
    --shc-width-xxs: 320px;
    --shc-width-xs:  384px;
    --shc-width-sm:  448px;
    --shc-width-md:  512px;
    --shc-width-lg:  576px;
    --shc-width-xl:  640px;
    --shc-width-2xl: 672px;
    --shc-width-3xl: 768px;
    --shc-width-4xl: 896px;
    --shc-width-5xl: 1024px;
    --shc-width-6xl: 1152px;

    /* =========================================================================
       CONTAINERS (px — isolated from html font-size)
       ========================================================================= */
    --shc-container-padding-mobile:  20px;
    --shc-container-padding-desktop: 32px;
    --shc-container-max-width:       1280px;
    --shc-paragraph-max-width:       720px;

    /* =========================================================================
       LAYOUT — dashboard-specific
       ========================================================================= */
    --shc-sidebar-width:      296px;
    --shc-content-max-width:  1144px;

    /* =========================================================================
       TRANSITIONS
       ========================================================================= */
    --shc-transition-fast:   150ms ease;
    --shc-transition-normal: 200ms ease;
    --shc-transition-slow:   300ms ease;

    /* =========================================================================
       Z-INDEX SCALE
       ========================================================================= */
    --shc-z-dropdown:  100;
    --shc-z-sticky:    200;
    --shc-z-overlay:   300;
    --shc-z-modal:     400;
    --shc-z-toast:     500;

    /* =========================================================================
       BACKWARD COMPATIBILITY ALIASES
       Old --shc-db-* → new --shc-*
       Old --primary-* → new --shc-primary-*
       These keep existing CSS working during migration.
       Remove after full migration to --shc-* prefix.
       ========================================================================= */

    /* --shc-db-* aliases */
    --shc-db-primary-25:  var(--shc-primary-25);
    --shc-db-primary-50:  var(--shc-primary-50);
    --shc-db-primary-100: var(--shc-primary-100);
    --shc-db-primary-200: var(--shc-primary-200);
    --shc-db-primary-300: var(--shc-primary-300);
    --shc-db-primary-400: var(--shc-primary-400);
    --shc-db-primary-500: var(--shc-primary-500);
    --shc-db-primary-600: var(--shc-primary-600);
    --shc-db-primary-700: var(--shc-primary-700);
    --shc-db-primary-800: var(--shc-primary-800);
    --shc-db-primary-900: var(--shc-primary-900);

    --shc-db-gray-25:  var(--shc-gray-25);
    --shc-db-gray-50:  var(--shc-gray-50);
    --shc-db-gray-100: var(--shc-gray-100);
    --shc-db-gray-200: var(--shc-gray-200);
    --shc-db-gray-300: var(--shc-gray-300);
    --shc-db-gray-400: var(--shc-gray-400);
    --shc-db-gray-500: var(--shc-gray-500);
    --shc-db-gray-600: var(--shc-gray-600);
    --shc-db-gray-700: var(--shc-gray-700);
    --shc-db-gray-800: var(--shc-gray-800);
    --shc-db-gray-900: var(--shc-gray-900);

    --shc-db-success-25:  var(--shc-success-25);
    --shc-db-success-50:  var(--shc-success-50);
    --shc-db-success-100: var(--shc-success-100);
    --shc-db-success-500: var(--shc-success-500);
    --shc-db-success-600: var(--shc-success-600);
    --shc-db-success-700: var(--shc-success-700);

    --shc-db-error-25:  var(--shc-error-25);
    --shc-db-error-50:  var(--shc-error-50);
    --shc-db-error-100: var(--shc-error-100);
    --shc-db-error-500: var(--shc-error-500);
    --shc-db-error-600: var(--shc-error-600);
    --shc-db-error-700: var(--shc-error-700);

    --shc-db-warning-25:  var(--shc-warning-25);
    --shc-db-warning-50:  var(--shc-warning-50);
    --shc-db-warning-100: var(--shc-warning-100);
    --shc-db-warning-500: var(--shc-warning-500);
    --shc-db-warning-600: var(--shc-warning-600);
    --shc-db-warning-700: var(--shc-warning-700);

    --shc-db-blue-25:  var(--shc-blue-25);
    --shc-db-blue-50:  var(--shc-blue-50);
    --shc-db-blue-100: var(--shc-blue-100);
    --shc-db-blue-500: var(--shc-blue-500);
    --shc-db-blue-600: var(--shc-blue-600);
    --shc-db-blue-700: var(--shc-blue-700);

    --shc-db-shadow-xs: var(--shc-shadow-xs);
    --shc-db-shadow-sm: var(--shc-shadow-sm);
    --shc-db-shadow-md: var(--shc-shadow-md);
    --shc-db-shadow-lg: var(--shc-shadow-lg);
    --shc-db-shadow-xl: var(--shc-shadow-xl);

    --shc-db-radius-xs:   var(--shc-radius-xs);
    --shc-db-radius-sm:   var(--shc-radius-sm);
    --shc-db-radius-md:   var(--shc-radius-md);
    --shc-db-radius-lg:   var(--shc-radius-xl);   /* old lg (12px) = new xl */
    --shc-db-radius-xl:   var(--shc-radius-2xl);   /* old xl (16px) = new 2xl */
    --shc-db-radius-full: var(--shc-radius-full);

    --shc-db-space-1:  var(--shc-space-1);
    --shc-db-space-2:  var(--shc-space-2);
    --shc-db-space-3:  var(--shc-space-3);
    --shc-db-space-4:  var(--shc-space-4);
    --shc-db-space-5:  var(--shc-space-5);
    --shc-db-space-6:  var(--shc-space-6);
    --shc-db-space-8:  var(--shc-space-7);
    --shc-db-space-10: var(--shc-space-8);
    --shc-db-space-12: var(--shc-space-9);

    --shc-db-font:      var(--shc-font);
    --shc-db-font-mono: var(--shc-font-mono);

    --shc-db-sidebar-width:      var(--shc-sidebar-width);
    --shc-db-content-max-width:  var(--shc-content-max-width);

    /* Bare --primary-* aliases (used in some templates) */
    --primary-25:  var(--shc-primary-25);
    --primary-50:  var(--shc-primary-50);
    --primary-100: var(--shc-primary-100);
    --primary-200: var(--shc-primary-200);
    --primary-300: var(--shc-primary-300);
    --primary-400: var(--shc-primary-400);
    --primary-500: var(--shc-primary-500);
    --primary-600: var(--shc-primary-600);
    --primary-700: var(--shc-primary-700);
    --primary-800: var(--shc-primary-800);
    --primary-900: var(--shc-primary-900);

    --gray-25:  var(--shc-gray-25);
    --gray-50:  var(--shc-gray-50);
    --gray-100: var(--shc-gray-100);
    --gray-200: var(--shc-gray-200);
    --gray-300: var(--shc-gray-300);
    --gray-400: var(--shc-gray-400);
    --gray-500: var(--shc-gray-500);
    --gray-600: var(--shc-gray-600);
    --gray-700: var(--shc-gray-700);
    --gray-800: var(--shc-gray-800);
    --gray-900: var(--shc-gray-900);

    --success-50:  var(--shc-success-50);
    --success-500: var(--shc-success-500);
    --success-700: var(--shc-success-700);

    --error-50:  var(--shc-error-50);
    --error-500: var(--shc-error-500);
    --error-700: var(--shc-error-700);

    --warning-50:  var(--shc-warning-50);
    --warning-500: var(--shc-warning-500);
    --warning-700: var(--shc-warning-700);

    --shadow-xs: var(--shc-shadow-xs);
    --shadow-sm: var(--shc-shadow-sm);
    --shadow-md: var(--shc-shadow-md);
    --shadow-lg: var(--shc-shadow-lg);

    /* Old semantic aliases */
    --shc-primary:        var(--shc-primary-700);
    --shc-primary-light:  var(--shc-primary-50);
    --shc-primary-medium: var(--shc-primary-100);
    --shc-text:           var(--shc-gray-700);
    --shc-text-light:     var(--shc-gray-500);
    --shc-border:         var(--shc-gray-200);
    --shc-bg:             var(--shc-gray-50);

    /* Old --spacing-* / --radius-* / --sidebar-* aliases */
    --spacing-xs:  var(--shc-space-1);
    --spacing-sm:  var(--shc-space-2);
    --spacing-md:  var(--shc-space-3);
    --spacing-lg:  var(--shc-space-4);
    --spacing-xl:  var(--shc-space-5);
    --spacing-2xl: var(--shc-space-6);
    --spacing-3xl: var(--shc-space-7);
    --spacing-4xl: var(--shc-space-8);
    --spacing-5xl: var(--shc-space-9);

    --radius-sm: var(--shc-radius-sm);
    --radius-md: var(--shc-radius-md);
    --radius-lg: var(--shc-radius-xl);
    --radius-xl: var(--shc-radius-2xl);

    --sidebar-width:      var(--shc-sidebar-width);
    --content-max-width:  var(--shc-content-max-width);
}