/* Design tokens */

:root {
  /* Neutral UX */
  --n-100: #3B3D3F;
  --n-90:  #595C5E;
  --n-80:  #717679;
  --n-60:  #C0C0C0;
  --n-50:  #CCD0D2;
  --n-40:  #D8DBDD;
  --n-30:  #ECECEC;
  --n-20:  #F0F1F2;
  --n-10:  #FAFAFB;
  --n-0:   #FFFFFF;

  /* Primary */
  --primary-default:  #0070AF;
  --primary-hover:    #005A8C;
  --primary-focused:  #003657;
  --primary-pressed:  #00253A;
  --primary-accent:   #1495E6;
  --primary-highlight:#72BBF0;
  --primary-bg:       #E9EFF3;
  --primary-bg-tint:  #F8FAFB;

  /* Secondary */
  --secondary-default: #000000;
  --secondary-hover:   #373737;
  --secondary-focused: #555555;
  --secondary-pressed: #2A2A2A;
  --secondary-bg:      #E5E5E5;

  /* Links */
  --link-active:  #0043CE;
  --link-visited: #4802C3;
  --link-disabled:#E5E5E5;

  /* Header navigation */
  --header-nav-item-fg: var(--n-0);
  --header-nav-item-hover-bg: var(--primary-hover);
  --header-nav-item-hover-fg: var(--n-0);
  --header-nav-item-selected-bg: var(--primary-highlight);
  --header-nav-item-selected-fg: var(--primary-focused);

  /* Semantic */
  --success:          #178022;
  --success-hover:    #12661B;
  --success-focused:  #082B0B;
  --success-pressed:  #0F5517;
  --success-bg:       #EFF9F0;

  --error:            #DD0000;
  --error-hover:      #B10000;
  --error-focused:    #4A0000;
  --error-pressed:    #930000;
  --error-bg:         #FFF5F5;

  --attention:        #EBAB21;
  --attention-hover:  #BC891A;
  --attention-focused:#8F7000;
  --attention-pressed:#4E390B;
  --attention-bg:     #FFF9ED;
  --attention-onDark: #FFC700;

  --info:             #007C8D;
  --info-hover:       #006371;
  --info-focused:     #00535E;
  --info-pressed:     #00292F;
  --info-bg:          #E7F7F9;

  /* Selected chip */
  --chip-selected-bg:        var(--primary-highlight);
  --chip-selected-border:    var(--primary-accent);
  --chip-selected-fg:        var(--secondary-default);
  --chip-selected-bg-hover:  color-mix(in srgb, var(--primary-highlight) 80%, var(--primary-default));

  /* Text roles */
  --text-primary:   var(--n-100);
  --text-secondary: var(--n-90);
  --text-disabled:  var(--n-60);
  --text-error:     var(--error);
  --text-h1:        var(--primary-default);
  --text-h2:        var(--primary-focused);

  /* Border roles */
  --border-primary:   var(--n-40);
  --border-subtle:    var(--n-30);
  --border-selected:  var(--primary-accent);
  --border-success:   var(--success);
  --border-error:     var(--error);
  --border-attention: var(--attention);
  --border-info:      var(--info);

  /* Semantic aliases — fix broken var() references */
  --text-muted:    var(--text-secondary);
  --link-default:  var(--link-active);

  /* Extended semantic border tokens */
  --border-accent:  #2B7FFF;
  --border-muted:   #E3E7EB;

  /* Layout + shape */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  /* Sizing constraints */
  --max-w-form: 560px;  /* form / block width cap — used in create-flow components */

  /* Focus */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary-accent) 35%, transparent);

  /* Drop shadows */
  --shadow-app-default-strong:       2px 4px 8px 0 rgba(0, 0, 0, 0.24);
  --shadow-app-default-medium:       0 2px 6px 0 rgba(0, 0, 0, 0.16);
  --shadow-app-default-subtle:       0 0 4px 0 rgba(0, 0, 0, 0.08);
  --shadow-app-selected-strong:      2px 4px 8px 0 rgba(0, 112, 175, 0.24);
  --shadow-app-selected-medium:      0 2px 6px 0 rgba(0, 112, 175, 0.16);
  --shadow-app-selected-subtle:      0 0 4px 0 rgba(0, 112, 175, 0.10);
  --shadow-editorial-default-strong: 0 0 20px 0 rgba(0, 0, 0, 0.24);
  --shadow-editorial-default-medium: 0 0 20px 0 rgba(0, 0, 0, 0.16);
  --shadow-editorial-default-subtle: 0 0 20px 0 rgba(0, 0, 0, 0.08);
  --shadow-editorial-selected-strong:2px 4px 8px 0 rgba(0, 112, 175, 0.24);
  --shadow-editorial-selected-medium:0 2px 6px 0 rgba(0, 112, 175, 0.16);
  --shadow-editorial-selected-subtle:0 0 4px 0 rgba(0, 112, 175, 0.10);

  /* Typography family + weights */
  --font-family-base: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 700;
  --font-weight-bold: 900;

  /* Typography scale */
  --type-xxl-size: 40px;
  --type-xxl-line: 64px;

  --type-xl-size: 34px;
  --type-xl-line: 56px;

  --type-lg-title-size: 30px;
  --type-lg-title-line: 48px;

  --type-title-size: 24px;
  --type-title-line: 40px;

  --type-subtitle-size: 20px;
  --type-subtitle-line: 32px;

  --type-lg-body-size: 18px;
  --type-lg-body-line: 30px;

  --type-body-size: 16px;
  --type-body-line: 24px;

  --type-sm-body-size: 14px;
  --type-sm-body-line: 24px;

  --type-xs-body-size: 12px;
  --type-xs-body-line: 20px;

  /* Spacing scale (4px half-step, 8px base) */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-2h: 10px;   /* between  8px and 12px — legacy compat */
  --space-3:  12px;
  --space-3h: 14px;   /* between 12px and 16px — account UI gaps */
  --space-4:  16px;
  --space-4h: 18px;   /* between 16px and 20px — account UI padding */
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;

  /* Surface tokens — semantic backgrounds */
  --surface-page:           #F3F4F6;
  --surface-tint-primary:   #F7FBFF;
  --surface-tint-success:   #EDF7ED;
  --surface-tint-attention: var(--attention-bg);

  /* Extended semantic primary tokens */
  --primary-dark:  #0A3D5E;
  --primary-tint:  #0077B8;
}