/* Design System Tokens */

/* Global Reset & Box Sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

:root {
  /* 
   * 1. Color System 
   */
  
  /* Ink & Paper (Vintage Core) */
  --paper-base:   #F6F1E7;  /* warm ivory */
  --paper-shadow: #E8E1D3;
  --ink-primary:  #2B2A27;  /* near-black, not pure */
  --ink-muted:    #6E6B65;
  --ink-light:    #9B978F;

  /* Modern UI (Controls & Nav) */
  --nav-bg:       #121212;
  --nav-active:   #1F1F1F;
  --nav-accent:   #C9A86A;  /* brass / bookmark gold */
  --ui-border:    #2A2A2A;
  --ui-hover:     #2F2F2F;

  /* Semantic */
  --action-primary: #C9A86A;
  --action-hover:   #B89655;
  --success:        #6F8F72;
  --warning:        #C49A6C;
  --danger:         #9E4A3F;

  /* Button Variants */
  --btn-destructive-color:    var(--danger);
  --btn-destructive-border:   var(--danger);
  --btn-destructive-hover-bg: var(--danger);
  --btn-destructive-hover-text: #FFFFFF;

  /* Ink & Paper (Vintage Core) */
  --paper-base:   #F6F1E7;  /* warm ivory */
  --paper-shadow: #E8E1D3;
  --ink-primary:  #2B2A27;  /* near-black, not pure */
  --ink-muted:    #6E6B65;
  --ink-primary:  #2B2A27;  /* near-black, not pure */
  --ink-muted:    #6E6B65;
  --ink-light:    #9B978F;
  --ink-disabled: #A8A49D;  /* New token for disabled text */

  /* State Overlays */
  --state-blocked-overlay: rgba(246, 241, 231, 0.7); /* washed out paper feel */

  /* Production Match Overrides */
  --paper-aged:     #F6F1E8;
  --paper-warm:     #EFE7DA;
  --ink-dark:       #2A2520;
  --ink-soft:       #6B6258;
  --sepia-line:     #C8B89A;
  --leather-brown:  #5A3E2B;
  --ui-bg:          var(--nav-bg);
  --ui-surface:     var(--nav-active);
  --ui-text:        #FFFFFF;
  --ui-muted:       var(--ink-muted);
  --ui-accent:      var(--action-primary);

  /* Choice Controls — paper-native inputs for radios and multi-selects */
  --choice-surface:          color-mix(in srgb, var(--paper-aged) 90%, var(--paper-warm));
  --choice-surface-hover:    color-mix(in srgb, var(--paper-warm) 82%, var(--paper-aged));
  --choice-surface-selected: color-mix(in srgb, var(--paper-warm) 92%, var(--paper-aged));
  --choice-border:           color-mix(in srgb, var(--sepia-line) 78%, transparent);
  --choice-border-selected:  var(--leather-brown);
  --choice-mark:             var(--leather-brown);
  --choice-mark-contrast:    var(--paper-aged);
  --choice-focus-ring:       color-mix(in srgb, var(--action-primary) 48%, transparent);
  --choice-shadow:           0 4px 12px rgba(42, 37, 32, 0.08);

  /* Time Spine specific */
  --spine-line:     var(--sepia-line);
  --node-default:   var(--ink-soft);
  --node-active:    var(--ink-dark);
  --node-glow:      #B08A5A;
  --node-marker:    #B08A5A;
  --paper-texture:  rgba(0,0,0,0.03);

  --badge-premium-bg:   #FFF3E0;
  --badge-premium-text: #F57F17;
  --badge-free-bg:      #F5F5F5;
  --badge-free-text:    #757575;

  /* 
   * 2. Typography 
   */
  
  /* Families */
  --font-serif: 'Merriweather', 'EB Garamond', serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro', sans-serif;
  /* Type Scale - Generic */
  --text-display:         48px;
  --text-xxl:             32px;
  --text-xl:              28px; /* Production uses 28px */
  --text-title-sm:        24px; /* H3 size */
  --text-lg:              20px;
  --text-md:              16px;
  --text-sm:              14px;
  --text-xs:              12px;
  /* Type Scale */
  --text-page-title:      32px;
  --line-page-title:      1.4;
  
  --text-section-heading: 18px;
  --line-section-heading: 1.5;
  
  --text-body:            16px;
  --line-body:            1.58;
  
  --text-ui-label:        13px;
  --line-ui-label:        1.4;
  
  --text-nav-item:        14px;
  --line-nav-item:        1.2;

  --text-editor:          21px;
  --line-editor:          1.25;

  /* 
   * 3. Layout & Spacing 
   */
  --canvas-max-width:     720px;
  --dashboard-page-max-width: 1200px;
  --canvas-padding-y:     64px;
  --canvas-padding-x:     56px;
  --canvas-radius:        2px;
  --canvas-shadow:        0 12px 30px rgba(0,0,0,.12);

  /* Shape — soft enough for modern controls, restrained enough for paper UI */
  --radius-compact: 8px;
  --radius-control: 12px;
  --radius-media: 14px;
  --radius-card: 18px;
  --radius-panel: 24px;
  --radius-pill: 999px;

  /* Dialog shell — calm modern container for dashboard popups */
  --dialog-backdrop: rgb(35 30 25 / 58%);
  --dialog-backdrop-blur: 5px;
  --dialog-surface: var(--paper-aged);
  --dialog-border: color-mix(in srgb, var(--sepia-line) 80%, white);
  --dialog-radius: 20px;
  --dialog-header-start: #6A594B;
  --dialog-header-end: #806B59;
  --dialog-header-text: #FFF9EE;
  --dialog-header-muted: rgb(255 249 238 / 88%);
  --dialog-key-surface: #FFFDF8;
  --dialog-key-border: rgb(85 65 48 / 26%);
  --dialog-key-depth: rgb(85 65 48 / 32%);
  --dialog-shadow: 0 24px 80px rgb(38 29 22 / 32%);

  /* Spacing Tokens */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-xxl: 64px;

  /* 
   * Shadows 
   */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-floating: 0 12px 30px rgba(0,0,0,.12);

  /* 
   * 4. Custom Selection & Cursors
   */
  --selection-vintage: rgba(176, 138, 90, 0.4);  /* Opaque Accent Sepia */
  --selection-system:  rgba(201, 168, 106, 0.6);  /* More vibrant Brass */

  /* Elegant SVG Cursors (Data URLs) */
  --cursor-default: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 3.5V18.5L9.5 14.5L11.5 19.5L13.5 18.5L11.5 13.5L16.5 13.5L5.5 3.5Z' fill='%23C9A86A' stroke='%23121212' stroke-width='1.5'/%3E%3C/svg%3E") 5 3, default;
  --cursor-pointer: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 14.5C9.5 14.5 12.5 17.5 14 15.5C15.5 13.5 12.5 10.5 12.5 10.5M4.5 9.5C4.5 6.5 7.5 6.5 7.5 9.5V12.5M7.5 8.5C7.5 5.5 10.5 5.5 10.5 8.5V11.5M10.5 8.5C10.5 5.5 13.5 5.5 13.5 8.5V11.5M13.5 11.5C13.5 9.5 16.5 9.5 16.5 11.5C16.5 15.5 13.5 20.5 9.5 20.5C5.5 20.5 4.5 16.5 4.5 11.5V9.5Z' stroke='%23121212' stroke-width='1.5' fill='%23C9A86A'/%3E%3C/svg%3E") 6 5, pointer;
  --cursor-text:    url("data:image/svg+xml,%3Csvg width='12' height='24' viewBox='0 0 12 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4H10M6 4V20M2 20H10' stroke='%23C9A86A' stroke-width='2'/%3E%3C/svg%3E") 6 12, text;

  /* Visibility & Data Box Tokens */
  --toggle-bg:       var(--paper-shadow);
  --toggle-active:   var(--success);
  --toggle-thumb:    #FFFFFF;
  --box-bg:          #FFFFFF;
  --box-shadow-inner: inset 0 1px 3px rgba(0,0,0,0.06);
}

/* Global Selection Styles */
::selection {
  background-color: var(--selection-system);
  color: inherit;
}

/* Context-Aware Selection */
.notebook-page ::selection,
.memory-content ::selection,
[data-theme="vintage"] ::selection {
  background-color: var(--selection-vintage);
}

/* Global Cursor Styles */
body {
  cursor: var(--cursor-default);
}

a, 
button, 
.interactive, 
[role="button"] {
  cursor: var(--cursor-pointer);
}

input[type="text"],
input[type="password"],
input[type="email"],
textarea,
.editable {
  cursor: var(--cursor-text);
  caret-color: var(--ink-primary);
}

/* Utilities */
.hidden {
  display: none !important;
}