/* =============================================================================
   FILE: assets/css/base.css
   PROJECT: Smart Bookmark
   PURPOSE: Global design tokens (CSS custom properties), CSS reset, and base
            typography. This file is shared across ALL pages in the application.
            Import this FIRST before any page-specific stylesheet.

   SECTIONS:
     1. Design Tokens (Custom Properties)
     2. CSS Reset
     3. Base Typography & Body

   USAGE:
     <link rel="stylesheet" href="assets/css/base.css" />
   ─────────────────────────────────────────────────────────────────────────────
   NAMING CONVENTION:
     --clr-*       → colour tokens
     --radius-*    → border-radius scale
     --shadow-*    → box-shadow presets
     --transition  → standard easing timing
     --font        → font stack
============================================================================= */


/* =============================================================================
   1. DESIGN TOKENS
   Design tokens are the single source of truth for all visual decisions.
   Changing a token here automatically updates every component that uses it.
============================================================================= */
:root {

  /* ── Brand (Slate) colour scale ─────────────────────────────────────────
     Used for dark backgrounds, text, borders, and neutral UI surfaces.
     900 = darkest (page bg), 50 = lightest (input bg, page bg on light side) */
  --clr-brand-900: #0f172a;
  --clr-brand-800: #1e293b;
  --clr-brand-700: #334155;
  --clr-brand-600: #475569;
  --clr-brand-200: #e2e8f0;
  --clr-brand-100: #f1f5f9;
  --clr-brand-50:  #f8fafc;

  /* ── Accent (Amber) colour scale ─────────────────────────────────────────
     Used for brand highlights, icon backgrounds, and gradient accents. */
  --clr-accent-500: #f59e0b;
  --clr-accent-400: #fbbf24;
  --clr-accent-300: #fcd34d;

  /* ── Primary (Indigo) colour scale ──────────────────────────────────────
     Used for interactive elements: buttons, focus rings, links, active states. */
  --clr-indigo-600: #4f46e5;
  --clr-indigo-500: #6366f1;
  --clr-indigo-400: #818cf8;

  /* ── Semantic colours ────────────────────────────────────────────────────
     Used for feedback states (success banners, error messages, etc.) */
  --clr-success:        #22c55e;
  --clr-error:          #ef4444;
  --clr-error-bg:       #fef2f2;
  --clr-error-border:   #fecaca;

  /* ── Border radius scale ─────────────────────────────────────────────────
     sm → small chips/tags, md → inputs/buttons, lg → cards, xl → modal-sized cards */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* ── Box shadow presets ──────────────────────────────────────────────────
     Consistent shadow depth levels used across cards, inputs, and buttons. */
  --shadow-card:  0 20px 60px rgba(15, 23, 42, 0.25);
  --shadow-input: 0 2px 8px rgba(79, 70, 229, 0.12);
  --shadow-btn:   0 4px 20px rgba(79, 70, 229, 0.40);

  /* ── Motion ──────────────────────────────────────────────────────────────
     Standard transition used on hover/focus interactions throughout the UI.
     Follows the Material Design "standard easing" curve. */
  --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Typography ──────────────────────────────────────────────────────────
     Inter is the primary typeface. Falls back to system-ui for performance. */
  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}


/* =============================================================================
   2. CSS RESET
   Modern minimal reset. Removes default browser margin/padding and normalises
   the box model so layout behaves consistently across all browsers.
============================================================================= */

/* Universal box-sizing: include padding/border in declared widths */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Allow percentage-based heights in the application */
html {
  height: 100%;
  scroll-behavior: smooth; /* Smooth anchor scrolling */
}

/* Remove list style without removing semantics (use role="list" in HTML if needed) */
ul,
ol {
  list-style: none;
}

/* Remove default link underline; individual components add it back as needed */
a {
  text-decoration: none;
  color: inherit;
}

/* Make images/media responsive by default */
img,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Inherit font in form elements (browser default is system-ui, not body font) */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove default button styles; components re-apply as needed */
button {
  cursor: pointer;
  background: none;
  border: none;
}


/* =============================================================================
   3. BASE TYPOGRAPHY & BODY
   Sets the page-level font, rendering optimization, and default colours.
   These are inherited by all descendants unless overridden at the component level.
============================================================================= */
body {
  height: 100%;
  font-family: var(--font);
  color: var(--clr-brand-900);
  background: var(--clr-brand-900);

  /* Improve font rendering on macOS/iOS (subpixel antialiasing looks blurry
     on modern retina displays; grayscale is crisper) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Prevent text size adjustment when rotating on mobile */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}