/* ============================================================
   DENTIUM PROTOTYPE — Design Tokens
   Source: design/colors_and_type.css + design system spec
   Rule: NEVER use raw hex/px values outside this file.
         Always reference via var(--token-name).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Open+Sans:wght@400;600;700&display=swap');

:root {

  /* ── BRAND & ACTION COLOURS ─────────────────────────────── */
  --color-primary:        #4845F0;
  --color-primary-dark:   #3835C0;
  --color-primary-light:  rgba(72, 69, 240, 0.08);
  --color-accent:         #D46C84;
  --color-accent-dark:    #B85570;
  --color-blue-alt:       #1E54B7;
  --color-purple-rare:    #9747FF;

  /* ── PAGE & SURFACE ─────────────────────────────────────── */
  --color-page-bg:        #EAE5F6;
  --color-surface:        #FFFFFF;
  --color-surface-subtle: #F4F5F8;
  --color-surface-muted:  #EAE5F6;

  /* ── CHARCOAL GREY SCALE ────────────────────────────────── */
  --color-cg-120: #30343E;
  --color-cg-100: #373C47;
  --color-cg-80:  #5F636C;
  --color-cg-60:  #9B9DA3;
  --color-cg-30:  #C3C5C8;
  --color-cg-10:  #EBECED;

  /* ── SEMANTIC FOREGROUND ALIASES ────────────────────────── */
  --fg-primary:    var(--color-cg-100);
  --fg-secondary:  var(--color-cg-80);
  --fg-muted:      var(--color-cg-60);
  --fg-dark:       var(--color-cg-120);
  --fg-on-primary: #FFFFFF;

  /* ── SEMANTIC BACKGROUND ALIASES ───────────────────────── */
  --bg-page:       var(--color-page-bg);
  --bg-surface:    var(--color-surface);
  --bg-table-head: var(--color-surface-subtle);

  /* ── BORDERS & DIVIDERS ─────────────────────────────────── */
  --color-divider:      #E0E2EA;
  --color-input-border: #9B9DA3;
  --color-required-star:#CC1414;

  /* ── STATUS COLOURS (bg + text pairs) ──────────────────── */
  --status-scheduled-bg:    #FFE8C6;
  --status-scheduled-text:  #DB7600;
  --status-confirmed-bg:    #EEF0FE;
  --status-confirmed-text:  #4845F0;
  --status-in-progress-bg:  #EEF0FE;
  --status-in-progress-text:#4845F0;
  --status-completed-bg:    #C6FFD2;
  --status-completed-text:  #10973E;
  --status-cancelled-bg:    #E1E8EA;
  --status-cancelled-text:  #5F636C;
  --status-no-show-bg:      #FFE4E4;
  --status-no-show-text:    #CC1414;
  --status-waiting-bg:      #FFF3E0;
  --status-waiting-text:    #E65100;
  --status-draft-bg:        #F4F5F8;
  --status-draft-text:      #5F636C;
  --status-issued-bg:       #EEF0FE;
  --status-issued-text:     #4845F0;
  --status-paid-bg:         #C6FFD2;
  --status-paid-text:       #10973E;
  --status-partial-bg:      #FFE8C6;
  --status-partial-text:    #DB7600;
  --status-void-bg:         #E1E8EA;
  --status-void-text:       #9B9DA3;

  /* ── AVATAR ─────────────────────────────────────────────── */
  --color-avatar-bg:   #1E54B7;
  --color-avatar-text: #FFFFFF;

  /* ── TYPOGRAPHY ─────────────────────────────────────────── */
  --font-primary:   'Poppins', sans-serif;
  --font-secondary: 'Open Sans', sans-serif;

  --text-display-size:  45px;

  --text-h1-size:   24px;
  --text-h1-weight: 500;

  --text-h2-size:   18px;
  --text-h2-weight: 500;

  --text-h3-size:   16px;
  --text-h3-weight: 400;

  --text-body-size:   12px;
  --text-body-weight: 400;

  --text-body-sm-size: 11px;

  --text-label-size:   12px;
  --text-label-weight: 700;

  --text-input-size:   14px;
  --text-input-weight: 400;

  --text-btn-size:   14px;
  --text-btn-weight: 700;

  --text-table-header-size:   12px;
  --text-table-header-weight: 600;

  --text-nav-size: 11px;

  /* ── SPACING SCALE ──────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── BORDER RADIUS ──────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;
  --radius-avatar: 50%;

  /* ── SHADOWS ────────────────────────────────────────────── */
  --shadow-header:   0px 1px 0px 0px #E0E2EA;
  --shadow-card:     0px 2px 8px 0px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0px 6px 20px 0px rgba(0, 0, 0, 0.12);
  --shadow-modal:    0px 20px 60px 0px rgba(0, 0, 0, 0.20);
  --shadow-dropdown: 0px 8px 24px 0px rgba(0, 0, 0, 0.12);
  --shadow-drawer:   -4px 0px 32px 0px rgba(0, 0, 0, 0.12);

  /* ── LAYOUT DIMENSIONS ──────────────────────────────────── */
  --sidebar-width:    180px;
  --header-height:     70px;
  --table-row-height:  40px;
  --field-height:      60px;

  /* ── TRANSITION DURATIONS ───────────────────────────────── */
  --transition-fast:   150ms;
  --transition-medium: 250ms;
  --transition-slow:   400ms;

  /* ── EASING ─────────────────────────────────────────────── */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}